挠性柱高度：在100vh高度集装箱内100％％

看到这个fiddle。挠性柱高度：在100vh高度集装箱内100％％

我有一个弹性布局，flex-direction:column与height: 100vh的容器内。我的柔性布局容器（蓝色）必须采用主容器的全高（height:100%）。

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

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

我试图设置min-height:100vh，它适用于让我所有的项目在列中，但笨拙的我的蓝色flex布局容器没有loger需要完整的100％的高度。

我无法更改html结构。

来源

2015-10-15 MQ87

.search-form {...}用min-height: 100%;代替height: 100%;，使其允许增长大于100％。

Fiddle here

来源

2015-10-15 11:31:31 klaar

鉴于这种情况下，现在我想，以避免对挠性元件溢出权当视口的高度是太小，无法容纳所有的元素。

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

在柔性容器（.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属性指定柔性物品是否被强制成一行或可以缠绕在多条线。

来源

2015-10-15 13:38:39

不错的解决方案，使用现代技术，但有一点要说的是，当父母高度缩小时，内容被推到父母的顶部和底部，而不是在底部，大多数人可能会期望。 – klaar

@klaar，是的，我注意到了。当父母（蓝色）收缩得足够小时，红色盒子会溢出容器。这是因为字体大小固定为18px。所以容器可以一直收缩到0，但是红盒子不能由于每个盒子中的18px内容。一种最小化溢出的方法是使用'vh'作为字体大小：http://jsfiddle.net/hxknmzfd/4/ –

或者另一种方法是使用媒体查询来将“justify-content”调整为另一个值。 – klaar

挠性柱高度：在100vh高度集装箱内100％％

回答

相关问题