Flex wrap layout and parent width

Question

Either I'm missing something or this is just how flex works.

Given a wrapping flex container with a max-width as children wrap the parents width remains at the max-width even though by wrapping the children the width could be reduced.

This makes it impossible to align the container to the center of it's container.

Here's a codepen illustrating the issue:

https://codepen.io/rsouthgate/pen/PozPyXZ

    .container {
      display: inline-flex;
      flex-wrap: wrap;
      max-width: 300px;
    }

So how can I get the container to not take up the space on the right after the wrap?

*Either I'm missing something or this is just how flex works.* --> it's the second one unfortunately — Temani Afif, Oct 13 '20 at 23:52

score -1 · Answer 1 · answered Oct 13 '20 at 23:50

Here are some of the possibilities via justify-content, in order: center, space-around, space-between. These all just change how the excess looks. If you want to make the children themselves take up the remaining space, use flex-grow: 1 instead.

You can read up more on css tricks: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.outer {
  display: flex;
  flex-direction: column;
}

.container {
  justify-content: center;
  background: grey;
  display: inline-flex;
  margin: 0 auto 10px;
  flex-wrap: wrap;
  max-width: 300px;
}

.child {
  width: 25px;
  height: 25px;
  background: white;
  margin: 5px;
}

.container2 {
  justify-content: space-around;
  background: grey;
  display: inline-flex;
  margin: 0 auto 10px;
  flex-wrap: wrap;
  max-width: 300px;
}

.container3 {
  justify-content: space-between;
  background: grey;
  display: inline-flex;
  margin: 0 auto 10px;
  flex-wrap: wrap;
  max-width: 300px;
}

.container4 {
  justify-content: space-between;
  background: grey;
  display: inline-flex;
  margin: 0 auto 10px;
  flex-wrap: wrap;
  width: 300px;
}

.child-grow {
  flex-basis: 25px;
  flex-grow: 1;
  height: 25px;
  background: white;
  margin: 5px;
}

center
<div class="outer">
  <div class="container">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
  <div class="container">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
</div>
Space around
<div class="outer">
  <div class="container2">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
  <div class="container2">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
</div>

Space between
<div class="outer">
  <div class="container3">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
  <div class="container3">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
</div>

Flex grow
<div class="outer">
  <div class="container4">
    <div class="child-grow"></div>
    <div class="child-grow"></div>
    <div class="child-grow"></div>
    <div class="child-grow"></div>
    <div class="child-grow"></div>
    <div class="child-grow"></div>
    <div class="child-grow"></div>
    <div class="child-grow"></div>
  </div>
  <div class="container4">
    <div class="child-grow"></div>
    <div class="child-grow"></div>
    <div class="child-grow"></div>
    <div class="child-grow"></div>
    <div class="child-grow"></div>
    <div class="child-grow"></div>
    <div class="child-grow"></div>
    <div class="child-grow"></div>
    <div class="child-grow"></div>
    <div class="child-grow"></div>
    <div class="child-grow"></div>
  </div>
</div>

Flex wrap layout and parent width

1 Answers1