Question

请参阅此fiddle。

我在flex-direction:column的容器中有height: 100vh的flex布局。我的flex布局容器（蓝色容器）必须占据主容器的整个高度（height:100%）。

鉴于此上下文，我想避免当视口高度太小而无法包含所有元素时右侧的flex元素溢出。

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

我试图设置min-height:100vh，它适用于让我的所有项目都在列中，但是我的蓝色弹性布局容器没有loger占据整个100％的高度。

我无法更改html结构。

Answer 1

在.search-form {...}中将height: 100%;替换为min-height: 100%;，以便允许其增长超过100％。

Fiddle here

Answer 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;
}

DEMO：http://jsfiddle.net/hxknmzfd/2/

flex-wrap

CSS flex-wrap属性指定是否强制使用弹性项目   单行或可以包裹在多行上。

柔性柱高度：100vh高度容器内100％

2 个答案: