Robbie Robbie - 15 days ago 5
CSS Question

css flex direction inside of flex box

I am trying to determine why this doesn't work as one would expect:

<style>
holder{
display:flex;
border:thin solid black;
}
column{
flex: 1;
background:cornflower;
border:thin solid yellow;
}
holderb{
flex-direction: column;
display:flex;
}
row{
border:thin solid blue;
flex:1;
background:yellow;
}
</style>


<holder>
<column>
<holderb>
<row>row1col1</row>
<row>row1col2<br/>hi<br/>hi<br/>hi<br/>hi</row>
</holderb>
</column>
<column>
<holderb>
<row>row1col1</row>
<row>row1col2</row>
</holderb>
</column>
</holder>


I am trying to get essentially a 2×2 grid.
I have noticed that moving the
flex-direction:column
up to
holder
DOES produce this result, but I am wondering why the opposite is not true.

Answer

Making a 2x2 grid while using items of variable height will inevitably result in something that is uneven-looking. The reason why your holderb tag's children do not obey the flex: 1 property is because you have not specified how much height the holderb tag should take up of the parent.

By adding height: 100% to your holderb tag you can achieve a "grid" that will take up all the space, which might be what you want.

https://jsfiddle.net/0uz6txyu

Edit: Okay, this one for sure.

https://jsfiddle.net/gcf12eq5/3

Comments