Why Does Applying Uk-width-1-1 Effect Child Divs Of Uk-grid But Not Nested Divs Of Child?

Why is 100% width not applied in this implementation (where the class uk-width-1-1 is applied to nested div of child of grid container):

Solution 1:

Why does applying uk-width-1-1 effect child divs of uk-grid but not nested divs of child?

Children of flex items is not part of the Flexbox. It is only children of a flex container (an element with display: flex) that is (or as you called them, immediate children), so your inner most div's is normal block level elements and will not respond to the set class uk-width-1-1, their parent will though, as in your second sample.

When it comes to Flexbox, one can, simplified, say they that the flex container behave similar to a block element and the flex item like a inline block.

This is also shown in your 1st replicated sample, where neither the flex item nor the inner most div's have a set width, so the inner most div's content will define the width of the flex item, in the same way a nested div in a div would, where the outer div is set to display: inline-block.

---

Here is some good resources:

• https://www.w3.org/TR/css-flexbox-1/#box-model
• https://css-tricks.com/snippets/css/a-guide-to-flexbox/

---

Updated

Note, a flex item can at the same time also be a flex container, like in below sample

<div style="display:flex; flex-wrap: wrap">
  <div style="display:flex; flex-wrap: wrap; flex-grow: 1; ">
    <div style="flex-basis: 100%; background: red">Item 1</div>
    <div style="flex-grow: 1; background: red">Item 2</div>
  </div>
</div>

Share