css flex direction inside of flex box

Question

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.

It's the first flex that holds everything else. Or do you mean the tag itself? It's just a custom tag to make things easier to read. — Robbie, Nov 19 '16 at 01:10
Nah, you've been able to do custom HTML tags for a few years now. You do need to tell css how to style them though as they're inline by default. But other than that every browser supports them with no issues. — Robbie, Nov 19 '16 at 01:16
@user2182349 it looks like a custom tag which you can use in most browsers. See [here](http://stackoverflow.com/questions/2802687/is-there-a-way-to-create-your-own-html-tag-in-html5). — Steven B., Nov 19 '16 at 01:16

shan · Accepted Answer · 2016-11-19T04:11:42.093

1

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

edited Nov 19 '16 at 04:11

answered Nov 19 '16 at 02:44

shan

3,035
5
34
50

While that is close, it still won't achieve my final goal. Essentially I want column 1 to always be on the left and column 2 always on the right. Then INSIDE column 2 any boxes to collapse as appropriate. It could probably be done easy enough with a table, but it wouldn't be as responsive. – Robbie Nov 19 '16 at 03:06
Not quite sure what you mean by "collapse as appropriate". You mean you want the height of the item to be set by the text height? – shan Nov 19 '16 at 03:37
See my updated answer for maybe something closer to what you're intending. – shan Nov 19 '16 at 03:44
I'm trying to emulate something like this: https://jsfiddle.net/gcf12eq5/1/ – Robbie Nov 19 '16 at 03:45
Your newest edit is almost exactly right. The only thing is the left doesn't stay left. I whipped up another example here: https://jsfiddle.net/0uz6txyu/7/ – Robbie Nov 19 '16 at 04:08
1

That's the most beautiful thing I've ever seen. Also a lot harder than I thought it would be (in concept). But that's exactly what I was looking for. – Robbie Nov 19 '16 at 04:19

css flex direction inside of flex box

1 Answers1