Flex column height: 100% inside a 100vh container

Question

See fiddle .

I have a flexible layout with flex-direction:columninside the container with height: 100vh. My flex layout container (blue) should have the full height ( height:100%) of the main container.

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

So, I want the whole viewport to be blue and all of my red elements inside blue to remain in the column.

I tried to install min-height:100vh, it works in order to allow all my elements in a column, but awkwardly my blue container of flexible layouts does not have a 100% stack size.

I can not change the structure of html.

Answer 1

In .search-form {...}replace height: 100%;with min-height: 100%;so that it becomes more than 100%.

Spell here

Answer 2

Given this context, now I want to avoid overflowing the flexible elements on the right when the height of the viewport is too small to contain all the elements.

So, I want the whole viewport to be blue, and all my red elements inside the blue stay in the column.

In the floppy disk container ( .flex-row), change flex-wrap: wrapto 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

The CSS property flex-wrapindicates whether flexible elements are forced into a single line or can be wrapped over multiple lines.