フレックスコンテナの最大高さ

Question

フレックスコンテナのフレキシブルコンテナは、columnsのフレックス方向と3つのdivで構成されています。 1番目と3番目のdivは内容と同じ高さですが、2番目のdiv（これはAと呼ばれます）は残りの領域になります。それは明らかですが、私はそれをとにかく追加します。 Aの身長は不明です。

内側A未知の幅/高さの画像がランダムに表示されます。これらの画像はすべて、（カルーセルのように）単一の行を占有します。イメージがなければなりません：

• はAの可視領域の幅の1/3以上を占めていない彼らのアスペクト比を維持し、また
• Aの最大の可能な面積を占めているが、
• 、また、
• 第必要

画像の間には隙間が私は簡単 max-width: 33%で達成することができなかったが、最初のものは、容易ではありません。 max-height: 100%が無視されているようです。ここで

はデモです：http://codepen.io/alexandernst/pen/oxqBPv

そしてここでは、期待された結果である：

|-------------------------------------------------|\ 
|             | \ 
| |---------------------------------------------| | \ 
| | up           | | \ 
| |---------------------------------------------| | \ 
|             |  | 
| |---------------------------------------------| |  | 
| |     @@@@@@@@@     | |  | 
| |     @@@@@@@@@     | |  | 
| | @@@@@@@@@@@@@@@@ @@@@@@@@@ @@@@@@@@@@@@@@@@ | |  | 
| | @@@@ 33 % w. @@@ @@@@@@@@@ @@@@ 33 % w. @@@ | |  | 
| | @@@@@@@@@@@@@@@@ @@@@@@@@@ @@@@@@@@@@@@@@@@ | |  400px 
| |     @@@@@@@@@     | |  | 
| |     @@@@@@@@@     | |  | 
| |---------------------------------------------| |  | 
|             |  | 
| |---------------------------------------------| | /
| | down          | | /
| |---------------------------------------------| |/
|             |/
|-------------------------------------------------|/ 

Answer 1

私は今、それはあなたが達成したいものです願っています：http://codepen.io/kbkb/pen/jqzBKJ

あなたはheightへの欠落しているところ含有するものdiv。 max-heightは、親要素に高さがないため、100%が何であるかわかりませんでした。 （今は88％の高さを設定していましたが、上と下の高さを決めて100％（例えばcalc（100％〜20px））から引く必要があります。

text-align:centerで、画像をセンタリングします。

また、私はbox-sizing: border-boxを追加しました。これは、高さXの要素があり、1pxのボーダーを追加すると高さがX + 2になるという問題を解決します。 Trough border-box境界線は高さの上にない要素の内側に適用されます。