I have a two column flexbox with the last element flex-grow. When I put a hidden element in the middle of the two columns it works good

```css
.flex {
  display:flex;
}
.flex .item:last-child {
  background-color:lightgreen;
  flex-grow:1;
}
.flex .hidden {
  display:none;
}
```

```html
<div class="flex">
  <div class="item">1</div>
  <div class="hidden">3</div>
  <div class="item">2</div>
</div>
```

When I put the hidden element at the end I have a space problem with the last element

```css
.flex {
  display:flex;
}
.flex .item:last-child {
  background-color:lightgreen;
  flex-grow:1;
}
.flex .hidden {
  display:none;
}
```

```html
<div class="flex">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="hidden">3</div>
</div>
```

How come?