How to style flex parent to wrap all children

Question

I am working on a grid layout using css flex styling and want a total css solution, if possible, I have the means to fix it with javascript.

When a row exceeds the viewport width, it displays the scrollbar, but when you scroll, the styling of the row element remains the size of the viewport, it does not seem to "wrap" all of its children.

see : fiddle

Try scrolling, you will see the yellow row (.sk_row) class does not appear around all its children.

A solution would be fine, but I would like to know why the parent does not visually contain all children. I think I may be missing some key concept about flexboxes...

Duplicate of fiddle code...

<body>
<div id='pg_wrap'>
    <div id='frm0'>
        <div class='sk_scrl'>
                <div class='sk_row'>
                    <div class='itm_val'>row 1</div>
                    <div class='itm_val'>1</div>
                    <div class='itm_val'>2</div>
                    <div class='itm_val'>3</div>
                    <div class='itm_val'>4</div>
                    <div class='itm_val'>5</div>
                    <div class='itm_val'>6</div>
                    <div class='itm_val'>7</div>
                    <div class='itm_val'>8</div>
                </div>
                <div class='sk_row'>
                    <div class='itm_val'>row 2</div>
                    <div class='itm_val'>1</div>
                    <div class='itm_val'>2</div>
                    <div class='itm_val'>3</div>
                    <div class='itm_val'>4</div>
                    <div class='itm_val'>5</div>
                    <div class='itm_val'>6</div>
                    <div class='itm_val'>7</div>
                    <div class='itm_val'>8</div>
                </div>
            </div>
    </div>
</div>

#frm0{      width:420px;height:200px}
.sk_scrl{   overflow:auto;display:flex;flex-flow:column;align-content:stretch}
.sk_row{
    display:flex;
    justify-content:flex-start;
    align-items:center;
    background:#ff0;border:2px #f00 solid;
    height:50px}
.itm_val{   
    display:flex;
    border:1px #000 solid;background:#666;
    flex:0 0 100px;    height:30px; margin:0 5px;
    align-items:center;justify-content:center}

Note : this is not the same as question That op wants to change child behaviour, I want the parent to change.

Are the rows to scroll independently or all rows scrolling together? — Stacker-flow, Nov 14 '14 at 01:42
All together, as in fiddle, its just that yellow area that has me stumped. — Mahks, Nov 14 '14 at 01:47
I am on it, got it working independently, just to bind it now — Stacker-flow, Nov 14 '14 at 01:47
@Godisgood I didn't supply this as an answer because I didn't really solve it but this is how far I got.. http://jsfiddle.net/hserczk5/5/ & http://jsfiddle.net/hserczk5/6/ — Stacker-flow, Nov 15 '14 at 13:58

Niffler · Answer 1 · 2014-11-15T00:17:16.283

0

It's not working the way you want because .sk_row inherits the width, in this case from #frm0:

#frm0 { width: 420px; }

With the class .sk_scrl you can't see it very well, because it's set to:

.sk_scrl { overflow: auto; }

If you use your browsers developer tools (assuming you have any), you'll see that the elements wrapped around your .itm_val divs are all 420 pixel wide. The reason the .itm_val divs are all visible outside of their container, is because they are "overflowing" out of their containing div.

Here's an example for how the width-inheriting-thing works:

<div class="container">
    <div class="element"></div>
</div>

If you set the the width of .container to 50%, it will use up half of the available width within the window. If, however, you want .element to take up the full width of the window, you will have to adjust the width like this:

.element {
    width: 200%;
}

If it were set to 100%, it would only be as wide as .container.

Here's a fiddle: http://jsfiddle.net/Niffler/n8hmpv13/

edited Nov 15 '14 at 00:17

answered Nov 15 '14 at 00:09

Niffler

1,645
11
11

1

So you cannot set the width of the container with css to the width of its flex children? (when the container is flex too) – Mahks Nov 15 '14 at 00:25
Not to my knowledge...sorry. (But I don't have a lot of experience with "flex"...) If it's just about the background though, you could either change it so that `.sk_scrl` has a background color and border instead of `.sk_row` (the border won't look the same though), or change it so that `.sk_row` has `overflow: auto` set instead of `.sk_scrl` (but then you'll have two scrollbars)... – Niffler Nov 15 '14 at 00:30
Just realized why I have a hard time with this. I thought that the element that has overflow set is what scrolls, but maybe it is its content that scrolls. That would explain why the styling and the scrollbar width do not equate. – Mahks Nov 15 '14 at 21:00

How to style flex parent to wrap all children

1 Answers1