Set Flexbox Children to Have Different Heights to Use Up Available Space

Set flexbox children to have different heights to use up available space

This is how Flexbox rows are expected to behave. Flexbox is not meant to recreate Masonry with pure CSS: items in one row cannot occupy space allocated for a preceding/following row (same goes for columns if you're using column orientation). You can use align-items to prevent them from stretching, but that's about it:

http://cssdeck.com/labs/9s9rhrhl

#container {

 width: 800px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.cell {
  width: 300px;
  flex: 1 auto;
  padding: 10px;
  border: 1px solid red;
}

Otherwise, you should be using the column orientation or the multi-column module (see this SO answer: https://stackoverflow.com/a/20862961/1652962)

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.

How to set flex column child to go full available height?

Your container is missing an height , you can use height:100vh; to fill window's height.

You can also use % , but you need to inherit a valid value from a parent. In this case, it can be take from html, send to body, and finally used by your container:(example in this duplicate)

html,body,.container {height:100%;}

example with vh

body {  margin: 0;}
.container {  display: flex;  flex-direction: column;  /*or min-height*/      height: 100vh;}
.header {  /* flex: 1; not needed */  background-color: red;}
.content {  flex: 1;  background-color: blue;  /*height: 100%; not needed */}

<div class="container">  <div class="header">    <h1>HEADER</h1>  </div>  <div class="content">    <h1>CONTENT</h1>  </div></div>

Variable heights and overflow in flexbox children

This is the problem:

.left-one {
    width: 100%;
    height: 100%;      <-- height 100% of what?
    background: green;
    margin-bottom: 10px;
    overflow: auto;
}

Since you haven't defined a height on the parent, the percentage height on the child falls back to auto (content-based), per the spec.

Here are complete explanations:

Why is percentage height not working on my div?
Chrome / Safari not filling 100% height of flex parent

Once you fix that percentage height issue, the vertical scroll bar works fine.

Instead of height: 100%, try flex: 1 0 1px (short for flex-grow, flex-shrink, flex-basis).

The flex-basis: 1px is used to trigger the scrollbar, which requires some form of fixed length.

In order for overflow to have an effect, the block-level container must have either a set height (height or max-height) or white-space set to nowrap.

^{https://developer.mozilla.org/en-US/docs/Web/CSS/overflow}

Then flex-grow: 1 consumes all free space that may be available.

revised fiddle demo

.wrap {  display: flex;  justify-content: space-between;  background: black;  height: 100vh;}
.left {  flex: 0 0 250px;  display: flex;  flex-direction: column;  justify-content: space-between;  background: yellow;}
.right {  flex: 1;  display: flex;  background: blue;}

.left-one {  flex: 1 0 1px; /* NEW */  margin-bottom: 10px;  overflow: auto;  background: lightgreen;}
.left-two {  background: red;}
.left-two img,.right img {  max-width: 100%;}
body { margin: 0; }

<div class="wrap">  <div class="left">    <div class="left-one">      HELLO<br> HELLO      <br> HELLO      <br> HELLO      <br> HELLO      <br> HELLO      <br> HELLO      <br> HELLO      <br> HELLO      <br> HELLO      <br> HELLO      <br> HELLO      <br> HELLO      <br> HELLO      <br> HELLO      <br> HELLO      <br> HELLO      <br> HELLO      <br> HELLO      <br> HELLO      <br> HELLO      <br> HELLO      <br> HELLO      <br> HELLO      <br> HELLO      <br> HELLO      <br> HELLO      <br> HELLO      <br> HELLO      <br> HELLO      <br> HELLO      <br> HELLO      <br> HELLO      <br> HELLO      <br> HELLO      <br> HELLO      <br> HELLO      <br> HELLO      <br> HELLO      <br> HELLO      <br> HELLO      <br> HELLO      <br> HELLO      <br> HELLO      <br> HELLO      <br> HELLO      <br> HELLO      <br> HELLO      <br> HELLO      <br> HELLO      <br> HELLO      <br> HELLO      <br> HELLO      <br> HELLO      <br> HELLO      <br> HELLO      <br> HELLO      <br> HELLO      <br> HELLO      <br> HELLO      <br> HELLO      <br> HELLO      <br> HELLO      <br> HELLO      <br> HELLO      <br> HELLO      <br> HELLO      <br> HELLO      <br> HELLO      <br> HELLO      <br> HELLO      <br> HELLO      <br>    </div>    <div class="left-two">      <img src="https://i.imgur.com/pSCepJR.jpg">    </div>  </div>  <div class="right">    <img src="https://i.imgur.com/8UZG4cr.jpg">  </div></div>

How to make all children items the same height in the flexbox, as the one that changes its height?

by making the css property align-items set to stretch
align-items:stretch
, which is the default value of that property and if the flex direction is column just set the width of the child element to 100%, and if the direction is row set height of child to 100%

Set Flexbox Children to Have Different Heights to Use Up Available Space