How to stretch flex child to fill height of the container?

Question

I need to stretch yellow child to fill all height of parent. Without setting parent height. Height of parent should be dependent on blue child text. https://jsfiddle.net/7vaequ1c/1/

<div style='display: flex'>    <div style='background-color: yellow;height: 100%; width: 20px'>    </div>    <div style='background-color: blue'>    some<br>    cool<br>    text    </div>  </div>

Answer 1

When using Flexbox, the major mistake is to start using height: 100% all over.

We are used to that in many cases, though when it comes to Flexbox, it often breaks it instead.

The solution is simple, just remove the height: 100%, and it will work automatically.

The reason it does, is for flex item in row direction (the default), the align-items control the vertical behavior, and as its default is stretch this just work as is.

Stack snippet

<div style='display: flex'>   <div style='background-color: yellow; width: 20px'>   </div>   <div style='background-color: blue'>     some<br> cool<br> text   </div> </div>

Answer 2

If I understood correctly, you are looking for the align-items property, which defines the layout along the cross axis, in this case vertically.

You can find a good overview here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.flexbox {    display: flex;    flex-direction: row;    justify-content: center;    align-items: stretch; // <-- stretch vertical (default value, can be omitted here)    align-content: center;  }    .box {      padding: 1em;      text-align: center;      margin: 1em;  }    .box--yellow {    background-color: yellow;  }    .box--blue {    background-color: blue;    color: white;  }

<div class="flexbox">    <div class="box box--yellow">      yellow    </div>    <div class="box box--blue">      some<br>      cool<br>      text    </div>  </div>