Flex柱高：100vh高度容器内100％

See this fiddle.

看到这个小提琴。

I have a flex layout with flex-direction:column inside a container with height: 100vh. My flex layout container (the blue one) has to take the full height (height:100%) of the main container.

我有一个flex-layout的flex布局：一个高度为100vh的容器内的列。我的flex布局容器（蓝色容器）必须占据主容器的整个高度（高度：100％）。

Given this context now I want to avoid flex elements overflow on the right when the viewport height is too small to contain all the elements.

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

So I want that all the viewport is blue and all my red elements inside the blue stay into a column.

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

I tried to set min-height:100vh , it works for letting have all my items in column but awkwardly my blue flex layout container no loger takes the full 100% height.

我尝试设置min-height：100vh，它适用于让我的所有项目都在列中，但是我的蓝色flex布局容器没有loger占用100％的全高。

I can't change the html structure.

我无法改变html结构。

2 个解决方案

#1

In .search-form {...} replace height: 100%; with min-height: 100%; so that it's allowed to grow larger than 100%.

在.search-form {...}中替换高度：100％;最小高度：100％;这样它就可以增长到100％以上。

Fiddle here

在这里小提琴

#2

Given this context now I want to avoid flex elements overflow on the right when the viewport height is too small to contain all the elements.

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

So I want that all the viewport is blue and all my red elements inside the blue stay into a column.

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

In the flex container (.flex-row) change flex-wrap: wrap to flex-wrap: nowrap.

在flex容器（.flex-row）中更改flex-wrap：wrap to 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/

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

flex-wrap

柔性包装

The CSS flex-wrap property specifies whether flex items are forced into a single line or can be wrapped onto multiple lines.

CSS flex-wrap属性指定是将flex项强制为单行还是可以包装到多行。

#1