Flex-box with child with overflow-x:auto and flex-grow:1 - html

Question

I'm trying to create a header with some items in a flex-box.
One of these items is a div "box" with flex-grow:1 to fill the remaining space of the line.
The div "box" has overflow-x: auto to create a horizontal scroll if necessary.
The problem is that if I do not set a max-width, the scroll of the div "box" does not appears and some items of the container go out of the container bounds...
I want to use all the remaining space used by the flex-grow:1. How can I solve this?
JSFiddle
.container {
display: flex;
width: 400px;
background-color: #fff;
}
.container > div {
flex-shrink: 0;
}
.box {
flex-grow: 1;
border: 1px solid #ff0000;
display: flex;
overflow-x: auto;
//max-width: 180px;
}
.scroll-box {
overflow-x: auto;
// max-width: 180px;
display: flex;
}
.box > div {
flex-shrink: 0;
width: 80px;
border: 1px solid black;
margin: 2px;
padding: 2px;
}
<div class="container">
<div>element1</div>
<div class="box">
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
</div>
<div>element 2</div>
<div>element 3</div>
</div>

Answer 1

Instead of flex-grow: 1 use flex: 1.
When you use flex-grow you set that particular property. But the other flexibility properties remain their default values. Namely, flex-shrink: 0 and flex-basis: auto.
With flex: 1, you're switching to:
flex-grow: 1
flex-shrink: 1
flex-basis: 0
So, the box is now allowed to shrink. But, more importantly, instead of the width of the box being auto (content-driven) it starts from 0. This is what enables the scroll function.