More than 1 year has passed since last update.

divタグの高さは中の子要素に高さによって、高さが決まる

Posted at 2024-07-10

divタグは特に指定をしない限り、中の子要素の高さによって、高さが決まります。
知ってはいたのですが、色々組み合わせていると少しハマったので記事にしてみました。

要素同士を親のdiv要素の上端、下端にそれぞれ配置しようとしたのですが、要素同士がくっついたままでした。

<div class='container'>
  <div class='child-1'></div>
  <div class='child-1'></div>
</div>

.container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

↑のコードだと子要素同士がくっついたままになっていて、2番目の子要素の下に大きなスペースがありました。
検証ツールを使って確認してみたところ、親要素も2つの子要素の大きさの幅しかなく、開いていたスペースは更にその親の要素のものでした。

なので、親要素に高さを指定し、子要素を上下端に配置させました。

.container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 300px; /* これ */
}