【SCSS/CSS🔰】position:absoluteを使うと、勝手に改行されてしまう問題

ホームページ制作にあたり、自分自身が躓いたポイントをメモとして残しています。

現象
対象方法
原因

現象

.top-kv-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);

position: absolute;を使ったところが、勝手に改行してしまった。

対象方法

該当箇所にwhite-space: nowrap;（改行させない）を入れることで解決。
widthを100%でも対応可。
white-space: nowrap;が入ることで改行させたくないものとの判断がつきやすい。

原因

absoluteにすると「幅:auto」の挙動が変わり、幅が狭くなった結果改行されてしまうケースがある。