How to style Flex parent to wrap all children
I am working on a grid layout using css flex styling and want a generic css solution, if possible I have the means to fix it with javascript.
When the line exceeds the width of the viewport, it displays the scrollbar, but when scrolling through the styles of the row element, the viewport size remains, it does not seem to "wrap" all of its children.
see: fiddle
Try scrolling, you can see that the yellow row class (.sk_row) doesn't appear around all of its children.
The solution would be fine, but I would like to know why the parent does not visually contain all the children. I think I may be missing a key concept about flexboxes ...
Duplicate script 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 This op wants to change the behavior of the child, I want the parent to change.
source to share
Doesn't work the way you want it to because it .sk_row
inherits the width, in this case from #frm0
:
#frm0 { width: 420px; }
With a class, .sk_scrl
you cannot see it very well because it is set to:
.sk_scrl { overflow: auto; }
If you use the browser developer tools (assuming you have one), you will see that the elements wrapped around your divs .itm_val
are only 420px wide. The reason divs are .itm_val
visible outside of their container is because they "overflow" from their containing div.
Here's an example of how the width-inheriting-thing property works:
<div class="container">
<div class="element"></div>
</div>
If you set the width .container
to 50%, it will use half the available width inside the window. If, however, you want it to .element
take up the full width of the window, you will have to adjust the width as follows:
.element {
width: 200%;
}
If it is set to 100% it will only be width .container
.
Here's the script: http://jsfiddle.net/Niffler/n8hmpv13/
source to share