Flexbox Layout with Two Equal Height Children, One Containing Nested Flexbox with Scrolling Content

Flexbox layout with two equal height children, one containing nested flexbox with scrolling content

In general, for overflow: scroll (or auto and hidden) to work, a height constraint is needed in one way or the other, or else element's normally grow as much as needed to fit their content.

There is mainly 3 ways, where either an actual height is set, as in this first sample, where I added it to the container.

Stack snippet 1

.container {  display: flex;  height: 100vh;}
.child {  border: 1px solid grey;  background-color: lightgrey;  flex: 1 1 auto;}
.controls-panel {  display: flex;  flex-direction: column;}
.controls {  flex: 0 0 auto;}
.content-wrapper {  flex: 1 1 auto;  width: 400px;  overflow-y: auto;}.content-item {  display: inline-block;  width: 100px;  height: 100px;  background-color: red;}

<div class="container">  <div class="child">    <p>In real life I am an inline img.</p>    <p>I am some content whoop de doo.</p>    <p>I am some content whoop de doo.</p>    <p>I am some content whoop de doo.</p>    <p>I want my sibling to equal my height.</p>  </div>  <div class="child controls-panel">    <div class="controls">      <p>Small controls area. Panel below should scroll vertically.</p>    </div>    <div class="content-wrapper">      <div class="content-item"></div>      <div class="content-item"></div>      <div class="content-item"></div>      <div class="content-item"></div>      <div class="content-item"></div>      <div class="content-item"></div>      <div class="content-item"></div>      <div class="content-item"></div>      <div class="content-item"></div>      <div class="content-item"></div>      <div class="content-item"></div>      <div class="content-item"></div>      <div class="content-item"></div>      <div class="content-item"></div>      <div class="content-item"></div>      <div class="content-item"></div>    </div>  </div></div>

Nested flexbox with scrolling area

Setting min-height is indeed required, and the correct way to achieve the desired layout. From the spec:

By default, flex items won’t shrink below their minimum content size (the length of the longest word or fixed-size element). To change this, set the min-width or min-height property.

So only by setting min-height do you allow your your <article> to actually make use of flex-shrink and fit into the parent flex container.

If I see this correctly, the issue you see with IE matches the bug described here and acknowledged here:

In IE 10-11, min-height declarations on flex containers in the column direction work to size the containers themselves, but their flex item children do not seem to know the size of their parents. They act as if no height has been set at all.

This might (or might not) encompass issues regarding overflow.

Nested flexbox UI with scrolling content rendered differently in Safari and in MS Edge

Ok this was a hard one! Add this to your CSS and it should work. (tested in Safari)

body .multiple-variable-selection-columns-container {
    height: calc(100% - 66px);
}

body .modal-menu .tab-content {
    height: calc(100% - 57px);
}

body .modal-wide .modal-dialog .modal-content .modal-body {
    height: calc(100% - 110px);
}

ng-include {
    display: block;
}

You have added height: 100%; to elements who have neighbour elements with there own height. You have definitely to cleanup your markup, but the CSS above should work for the moment.

I have added the body to get a stronger selector to overwrite your code. I also added a default display style for ng-include tag, the browser doesn't know what kind of styles to use, so the tag has no hight and is hard to debug.

I hope I could help you.

Equal height rows in a flex container

The answer is NO.

The reason is provided in the flexbox specification:

6. Flex Lines

In a multi-line flex container, the cross size of each line is the minimum size necessary to contain the flex items on the line.

In other words, when there are multiple lines in a row-based flex container, the height of each line (the "cross size") is the minimum height necessary to contain the flex items on the line.

Equal height rows, however, are possible in CSS Grid Layout:

• Equal height rows in CSS Grid Layout

Otherwise, consider a JavaScript alternative.

Nested flexbox column inside row, with full height children

Apply a width to the stage div equal to the div widths + margin and the justify-content:space-aound on the stage divs

.App {  display: flex;  height: 100%;}
.stage {  display: flex;  width: 52px;  flex-direction: column;  justify-content: space-around;}
.box {  height: 50px;  width: 50px;  background-color: red;  margin: 1px;}

<div class="App">  <div class="stage">    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>  </div>  <div class="stage">    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>  </div>  <div class="stage">    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>  </div>  <div class="stage">    <div class="box"></div>    <div class="box"></div>  </div>  <div class="stage">    <div class="box"></div>  </div></div>

How can I make Flexbox children 100% height of their parent?

Use align-items: stretch

Similar to David Storey's answer, my workaround is:

.flex-2 {
    display: flex;
    align-items: stretch;
}

Note that height: 100% should be removed from the child component (see comments).

Alternatively to align-items, you can use align-self just on the .flex-2-child item you want stretched.

---

Related Topics