Flex divs with 50% parent width wrapping when not suppoused to

Question

I feel stupid for not being able to figure it out but for some reason I cannot make those divs to stay in one line. I expect them to be next to each other in one line since they both have half of parent divs width while keeping flex wrap in case if I added more divs.

Here is my code

.aside__item {
    background-color: green;
    margin: 10px;
    color: white;
    width: 50%;
    min-height: 200px;
    padding: 50px;
 }
.aside {
    display: flex;
    flex-flow: row wrap;
    width: 100%;
}
* {
    padding: 0;
    box-sizing: border-box;
 }

<aside class="aside"> 
            <div class="aside__item">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                Aenean luctus pulvinar risus ut congue. Duis eu metus eros.
            </div>
            <div class="aside__item">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                Aenean luctus pulvinar risus ut congue. Duis eu metus eros.</div>

        </aside>

score 3 · Answer 1 · answered Feb 19 '19 at 19:43

You can fix this by adding flex:1 to the child

.aside__item {
    background-color: green;
    margin: 10px;
    color: white;
    width: 50%;
    min-height: 200px;
    padding: 50px;
    flex:1;
 }
.aside {
    display: flex;
    flex-flow: row wrap;
    width: 100%;
}
* {
    padding: 0;
    box-sizing: border-box;
 }

<aside class="aside"> 
            <div class="aside__item">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                Aenean luctus pulvinar risus ut congue. Duis eu metus eros.
            </div>
            <div class="aside__item">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                Aenean luctus pulvinar risus ut congue. Duis eu metus eros.</div>

        </aside>

Thanks, maybe got any idea why it doesn't work in my example? — aMJay, Feb 19 '19 at 19:50

score 2 · Answer 2 · answered Feb 19 '19 at 19:41

2

Try this, you need to add flex-direction on the childs and remove flex-flow:

.aside__item {
    background-color: green;
    margin: 10px;
    color: white;
    width: 50%;
    min-height: 200px;
    padding: 50px;
    flex-direction: row; //need flex direction here
 }

.aside {
    display: flex;
    width: 100%;
}

* {
    padding: 0;
    box-sizing: border-box;
 }

https://jsfiddle.net/ao7hf6n9/

answered Feb 19 '19 at 19:41

Michelangelo

5,888
5
31
50

while this works I'm pretty sure `flex-direction` should be placed in the same class as the `display:flex`, any idea why that would make it work? – aMJay Feb 19 '19 at 19:49
1

@aMJay Doesn't seem to matter: https://stackoverflow.com/a/37844240/4194436 I always do it like this. – Michelangelo Feb 19 '19 at 19:54
`flex-direction` applies only to flex containers. It does nothing when applied to the children. – Michael Benjamin Feb 23 '19 at 04:22
Because you removed `flex-flow` from the container, which enabled `wrap`. The default is `nowrap`. – Michael Benjamin Feb 23 '19 at 12:47

jerrylow · Accepted Answer · 2019-02-19T20:04:21.613

2

There's some browser defaults causing the elements to have margins. Set the item's margin to be 0

.aside__item {
    background-color: green;
    margin: 10px;
    color: white;
    width: 50%;
    margin: 0;
    min-height: 200px;
    padding: 50px;
 }

https://jsfiddle.net/nyx9doba/

I recommend using something like normalize to reset all browser defaults to give you better control over your elements: https://necolas.github.io/normalize.css/

Update: To retain the margin you need to reduce your width to be 50% minus the margin:

.aside__item {
    background-color: green;
    margin: 10px;
    color: white;
    width: calc(50% - 20px);
    margin: 10px;
    min-height: 200px;
    padding: 50px;
 }

https://jsfiddle.net/y6jfadcw/

edited Feb 19 '19 at 20:04

answered Feb 19 '19 at 19:44

jerrylow

2,569
1
15
25

Thanks, but that doesn't solve my problem because I want the child divs to have `margins` – aMJay Feb 19 '19 at 19:53
Not a problem, but this is the basis of the actual problem because your `aside_items` exceed 50% (width + margin). If you want to retain the margin you'll need your width to be less than 50%. I'll add the example above. – jerrylow Feb 19 '19 at 20:03
1

That seems to be right, also read your another comment I was convinced to this point that `margins` are also included in `box-sizing`, thanks. Also what confused me was that the calculated `widths` of the child `divs` were exactly `50%` of parent `div` – aMJay Feb 19 '19 at 20:08
@aMJay yea I can see why - flex + width has some interesting behaviours so it's not always accurate. – jerrylow Feb 19 '19 at 20:09

score 1 · Answer 4 · answered Feb 19 '19 at 19:44

The margin on the items causes your items to exceed 50%. If you reduce it to something like 40%, it will work fine. Alternatively, you can remove your margin.

.aside__item {
  background-color: green;
  margin: 10px;
  color: white;
  width: 40%;
  min-height: 200px;
  padding: 50px;
}

.aside {
  display: flex;
  flex-flow: row wrap;
  width: 100%;
}

* {
  padding: 0;
  box-sizing: border-box;
}

<aside class="aside">
  <div class="aside__item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean luctus pulvinar risus ut congue. Duis eu metus eros.
  </div>
  <div class="aside__item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean luctus pulvinar risus ut congue. Duis eu metus eros.</div>

</aside>

While this works, the width of the items including `margins` is exactly 50% of the parents and the `margins` don't make it exceed the `width` because of `box-siging:border-box` and this can be observed in computed styles of the elements, any idea why is it so? — aMJay, Feb 19 '19 at 19:48
@aMJay border-box only includes the padding and border-width in height/width calculations not the margin itself. — jerrylow, Feb 19 '19 at 20:05

Flex divs with 50% parent width wrapping when not suppoused to

4 Answers4