Flex容器中的最大高度

Question

我有一个弹性容器，其columns弯曲方向和3个div。第一个和第三个div占用内容所需的高度，而第二个div（我称之为A）占用剩余空间。这应该是显而易见的，但无论如何我都会添加它。 A的身高未知。

在A里面，我会有一个随机数量的图像，宽度/高度未知。所有这些图像将占据一行（就像旋转木马一样）。图像必须：

• 占据A的最大可能区域，但
• 保持宽高比，还
• 不占A可见区域宽度的1/3以上，
• 图像之间没有间隙

我可以用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的{​​{1}}。 div不知道max-height是什么，因为父元素没有高度。 （我现在设置88％的高度，因为它适合，但你应该确定向上和底部的高度，并从100％减去它们，例如`calc（100％ - 20px））。

使用100%然后我将图像居中。

我还添加了text-align:center这解决了当你有一个高度为X的元素并添加1 px的边框时你会有高度：X + 2的问题。槽box-sizing: border-box边框适用于不在高度顶部外的元素内。