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>

Answer 3

Remove

height:100%;

and instead do something like this example :

<div style="display:flex; flex-direction:column">
<div style="flex-grow:1;"> Item 1 </div>
<div style="flex-grow:1;"> Item 2 </div>
</div>

above example will show you what you want.

Answer 4

 <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 5

Here you go:

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