親コンテナにheight: 1pxを追加します。 Chrome、FF、Safariで動作します。

これは報告された Webkit (chrome/safari) のバグです。最小の高さを持つ親要素の子要素は height 属性を継承できません:https://bugs.webkit.org/show_bug.cgi?id= 26559

どうやら Firefox も影響を受けるようです (現時点では IE ではテストできません)

＃＃＃可能な解決策：＃＃＃

#containment にposition:relative

を追加
• #containment-shadow-left にposition:absolute
を追加
このバグは、内部要素に絶対配置がある場合には発生しません。

http://jsfiddle.net/xrebB/

を参照してください。2014 年 4 月 10 日編集

#

私は現在、min-heightを持つ親コンテナーとコンテナーの高さを継承する子要素を実際に必要とするプロジェクトに取り組んでいるため、もう少し調査しました。

まず第一に:現在のブラウザーの動作が実際にバグであるかどうかは、もはやわかりません。 CSS2.1 仕様には次のように書かれています:

コンテナに min-height を設定する場合、その高さを明示的に指定しているわけではないため、要素は

auto

高さを取得する必要があります。これはまさに Webkit や他のすべてのブラウザが行うことです。2 番目に、私が見つけた解決策:

コンテナ要素をdisplay:tableに設定し、

height:inherit

を使用すると、min-heightに 100% を指定したように動作します。同じ。そして、さらに重要なことに、子要素をdisplay:table-cellに設定すると、コンテナ要素の高さが 100% 以上であっても完全に継承されます。完全な CSS:リーリー ＃＃＃マーク：＃＃＃ リーリー

http://jsfiddle.net/xrebB/54/

を参照してください。