Flexbox wrap leaves empty space when used with min-width

Question

As you can see in this small example down below, I have set a max-width and I want to take full advantage of that width, but shrink it if nothing more can fit in it. But for some reason, the flex box takes up all the available space even though it doesn't need it.

Why does it work like this? Is it intentional? And how do I make the flex box take up no additional width aside from the width needed to fit the content?

Basically, how do I hide the black part of the box while keeping all the size requirements the same?

.box {
  display: flex;
  flex-wrap: wrap;
  background-color: black;
  max-width: 400px;
}

.box > div {
  height: 40px;
  box-sizing: border-box;
}

.box > div:nth-child(1) {
  background-color: red;
  width: 200px;
}

.box > div:nth-child(2) {
  background-color: green;
  width: 100px;
}

.box > div:nth-child(3) {
  background-color: blue;
  width: 300px;
}

<div class="box">
  <div>Some</div>
  <div>content</div>
  <div>here</div>
</div>

Thanks in advance and have a good day!

Flexbox wrap leaves empty space when used with min-width

0 Answers0