Why doesn't justify-content: stretch work?

Question

Why does the code below not stretch my 100px items?

The results are basically close to this:

[100px|100px|100px|.........]

That looks a lot like flex-start, not flex-stretch. Is this the intended behavior?

I'm looking for:

[...100px...100px...100px...]

.box {
  display: flex;
  justify-content: stretch;
  width: 500px;
}

.item {
  width: 100px;
}

<div class="box">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

Answer 1

Because - if you want the items to stretch in width - you have to allow the flex items to grow by adding flex-grow: 1;:

.box {
  display: flex;
  justify-content: stretch;
  width: 500px;
  border: 1px solid red;
  
}

.item {
  width: 100px;
  border: 1px solid green;
  flex-grow: 1;
}

<div class="box">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

If you don't mean they should grow, but simply be distributed across the whole width of their container, use justify-content: space-between od ... space-around:

.box {
  display: flex;
  justify-content: space-around;
  width: 500px;
  border: 1px solid red;
}

.item {
  width: 100px;
  border: 1px solid green;
}

<div class="box">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

Answer 2

Why doesn't justify-content: stretch work?

Because in flexbox there is no such value with justify-content.

See MDN: stretch is not supported by flexible boxes (flexbox).

So your rule is invalid and the browser defaults to justify-content: flex-start, the initial setting.

Use the flex-grow property on flex items to achieve the desired effect.