弹性柱高：100% 在 100vh 高度容器内答案

【问题标题】：Flex column height:100% inside 100vh height container弹性柱高：100% 在 100vh 高度容器内
【发布时间】：2015-10-17 07:18:13
【问题描述】：

看到这个fiddle。

我在带有height: 100vh 的容器内有一个带有flex-direction:column 的弹性布局。我的 flex 布局容器（蓝色的）必须占据主容器的全高 (height:100%)。

现在考虑到这个上下文，当视口高度太小而无法包含所有元素时，我想避免右侧的 flex 元素溢出。

所以我希望所有视口都是蓝色的，并且蓝色内的所有红色元素都保持在一列中。

我尝试设置 min-height:100vh ，它可以让我的所有项目都在列中，但尴尬的是我的蓝色 flex 布局容器没有记录器占据完整的 100% 高度。

我无法更改 html 结构。

【问题讨论】：

标签： css flexbox

【解决方案1】：

在.search-form {...} 中，将height: 100%; 替换为min-height: 100%;，这样它就可以增长超过100%。

Fiddle here

【讨论】：

【解决方案2】：

现在考虑到这种情况，我想避免 flex 元素在当视口高度太小而无法包含所有元素。

所以我希望所有的视口都是蓝色的，而我所有的红色元素都在里面蓝色停留在一个列中。

在弹性容器 (.flex-row) 中将 flex-wrap: wrap 更改为 flex-wrap: nowrap。

.flex-row {
    width: 100%;
    display: flex;
    /* flex-wrap: wrap; REMOVE */
    flex-wrap: nowrap; /* NEW */
    justify-content: space-around;
    flex-direction: column;
    align-items: center;
}

演示：http://jsfiddle.net/hxknmzfd/2/

flex-wrap

CSS flex-wrap 属性指定是否强制弹性项目成一行，也可以换成多行。

【讨论】：

使用现代技术的不错的解决方案，但要注意的是，当父级的高度缩小时，内容会在父级的顶部和底部被推到外面，而不是仅仅在正如大多数人所期望的那样，底部。
@klaar，是的，我注意到了。当父级（蓝色）缩小到足够小时，红色框会溢出容器。这是因为字体大小固定为 18px。所以容器可以一直缩小到0，但是红色的盒子不能，因为每个盒子的内容都是18px。最小化溢出的一种方法是使用vh 作为字体大小：jsfiddle.net/hxknmzfd/4
或者另一种是使用媒体查询使justify-content适应另一个值。
另一个是在父 +1 中将 height: 100% 更改为 min-height: 100% :-) 同时使用您的答案和我的答案可能是最佳解决方案。
@klaar，另外需要注意的是，当屏幕缩小到足够小到红色框溢出的位置时，页面已经太小而无法阅读。因此，可访问性无论如何都会覆盖这个问题。