知ってると役立つかもしれない min-height の話

はじめに

今さらですが min-height ですこしハマってしまったので、その経験から得た知見を共有します。

tldr

コンテナに min-height を指定し、その内部のコンテンツ（つまり子要素）に height をパーセント指定してもコンテンツにはコンテナの高さが継承されません。

具体例

コンテナ（青）を min-height: 300px、コンテンツ（黄）を height: 100% にしました。この場合、直感的にはコンテンツの高さも 300px になりそうですが、以下のようにコンテンツの高さ分しか確保できません。

これは、height が明示的に指定されておらず実際のコンテナは height: auto になっているため、コンテンツがコンテナから高さを取得できないのです。

結局 min-height って

以下の引用では height や width が auto なら min-height や min-width の計算結果を使うとも書いてあります。tldr で挙げた例と同じ挙動ですね。

However, for replaced elements with both width and height computed as auto, use the algorithm under Minimum and maximum widths above to find the used width and height. Then apply the rules under “Computing heights and margins” above, using the resulting width and height as if they were the computed values.

しかし、幅と高さの両方が auto として計算された置換された要素については、上記の「最小幅と最大幅」のアルゴリズムを使用して、使用される幅と高さを求めます。次に、上記の「高さと余白の計算」の規則を適用し、計算された値であるかのように、結果の幅と高さを使用します。

csswg: min-height

つまり min-height を指定すれば直感的に height も常に決定（上書き）されるだろうという勘違いがハマりポイントなわけです。min-height 指定だけでは height は初期値の auto のままです。

回避策

回避策として一例を示します。tldr で挙げた例のコンテナ要素に height: 1px を与えます。絶対長（ <length>）を与えることで、height: auto になることを回避しています。あとは最小幅と最大幅のアルゴリズムを使い、height < min-height となっているので解決された高さとして min-height の高さが用いられます。これでコンテナの高さが確定したのでコンテンツの height: 100% が意図通りになりました。

参考

記事中の引用のほかに以下の記事を参考にしました。他の回避策も紹介されています。

Child inside parent with min-height: 100% not inheriting height

おわりに

日本語の解説記事が見当たらなかった&備忘録として書いてみました。

記事を書くことを通じて、CSS プロパティの仕様を読むなど良い経験にもなりました。

本記事が誰かの助けになれば幸いです。