When rows added to a flexbox, box's height increases - html

Question

When I add more inbox1 class divs into the div with class box1, the height of box1 increases. You can observe this in jsfiddle with red background never disappearing, however many inbox1's are added. What is the reason of this?
.outer {
position: relative;
width: 400px;
height: 600px;
background-color: black;
display: flex;
flex-flow: row wrap;
}
.container {
position: relative;
flex: 1;
display: flex;
flex-direction: column;
}
d1 {
flex: 1;
background-color: yellow;
}
.d2 {
flex: 1;
background-color: green;
}
.box1 {
display: flex;
flex-flow: row wrap;
align-content: flex-start;
color: white;
flex: 1;
background-color: red;
overflow: scroll;
}
.box2 {
color: white;
flex: 12;
background-color: blue;
}
.inbox1 {
flex: 1 100%;
background-color: purple;
}
<div class="outer">
<div class="container">
<div class="box1">
<div class="inbox1">inbox1</div>
<div class="inbox1">inbox1</div>
<div class="inbox1">inbox1</div>
<div class="inbox1">inbox1</div>
<div class="inbox1">inbox1</div>
</div>
<div class="box2"></div>
</div>
<div class="d1"></div>
<div class="d2"></div>
</div>
Edit :
The purpose of this structure is that, container div is the content of a website, and d1 and d2 divs represent sidebars. However their order is not set in the example because they are needed for the sake of the result.
Container div has two parts, upper(red background) and lower. In my structure this upper and lower are set as flex boxes in container which is display flex with column direction. Upper is also display flex with row direction. However in this set up, as new items are added into the upper, the height of the upper increases. I dont want it enlarge with added childrens.
Note that, if I remove d1 and d2 divs and remove display:flex and related css attributes from outer div, and add container in it as a classic relative element, and change NOTHING else, this problem magically disappears.
Edit 2:
Thanks to oriol, i confirmed this only occurs with chrome.

Answer 1

If I understand you right, here is 3 ways to accomplish that
By giving flex: 0 to your box1, you tell it to only be as big as its content, and by adding max-height: 80px you say "start scroll" when content gets higher than 80px
.outer {
position:relative;
width:400px;
height:600px;
background-color:black;
display: flex;
flex-flow: row wrap;
}
.container {
position:relative;
flex: 1;
display: flex;
flex-direction: column;
}
.d1 {
flex: 1;
background-color: yellow;
}
.d2 {
flex: 1;
background-color: green;
}
.box1 {
display: flex;
flex-flow: row wrap;
align-content: flex-start;
color: white;
flex: 0; /* changed from 1 to 0 */
background-color: red;
overflow: scroll;
max-height: 80px; /* added */
}
.box2 {
color: white;
flex: 12;
background-color: blue;
}
.inbox1 {
flex: 1 100%;
background-color: purple;
}
<div class="outer">
<div class="container">
<div class="box1">
<div class="inbox1">
inbox1
</div>
<div class="inbox1">
inbox1
</div>
<div class="inbox1">
inbox1
</div>
<div class="inbox1">
inbox1
</div>
<div class="inbox1">
inbox1
</div>
</div>
<div class="box2">
</div>
</div>
<div class="d1">
</div>
<div class="d2">
</div>
</div>
Set the flex-basis to 8% (box1 has flex 1 and box2 has flex 12, 100 / 12+1 = 7.69) and when content grow beyond that, it starts to scroll.
Note that the container needs height:100%, so flex-basis: 8% have where to get its value.
.outer {
position:relative;
width:400px;
height:600px;
background-color:black;
display: flex;
flex-flow: row wrap;
}
.container {
position:relative;
height: 100%; /* added */
flex: 1;
display: flex;
flex-direction: column;
}
.d1 {
flex: 1;
background-color: yellow;
}
.d2 {
flex: 1;
background-color: green;
}
.box1 {
display: flex;
flex-flow: row wrap;
align-content: flex-start;
color: white;
flex: 1;
flex-basis: 8%; /* added */
background-color: red;
overflow: scroll;
}
.box2 {
color: white;
flex: 12;
background-color: blue;
}
.inbox1 {
flex: 1 100%;
background-color: purple;
}
<div class="outer">
<div class="container">
<div class="box1">
<div class="inbox1">
inbox1
</div>
<div class="inbox1">
inbox1
</div>
<div class="inbox1">
inbox1
</div>
<div class="inbox1">
inbox1
</div>
<div class="inbox1">
inbox1
</div>
</div>
<div class="box2">
</div>
</div>
<div class="d1">
</div>
<div class="d2">
</div>
</div>
Use an inner div with position: absolute (since flex has some issues to force scroll, this one make it happen)
.outer {
position:relative;
width:400px;
height:600px;
background-color:black;
display: flex;
flex-flow: row wrap;
}
.container {
position:relative;
flex: 1;
display: flex;
flex-direction: column;
}
.d1 {
flex: 1;
background-color: yellow;
}
.d2 {
flex: 1;
background-color: green;
}
.box1 {
display: flex;
flex-flow: row wrap;
align-content: flex-start;
flex: 2; /* temp. adjusted to make it slightly bigger */
position: relative; /* added to make position: absolute relate to this */
}
.box1 .inner { /* added rule to make box1 content scroll */
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
overflow: scroll;
color: white;
background-color: red;
}
.box2 {
color: white;
flex: 12;
background-color: blue;
}
.inbox1 {
flex: 1 100%;
background-color: purple;
}
<div class="outer">
<div class="container">
<div class="box1">
<div class="inner">
<div class="inbox1">
inbox1
</div>
<div class="inbox1">
inbox1
</div>
<div class="inbox1">
inbox1
</div>
<div class="inbox1">
inbox1
</div>
<div class="inbox1">
inbox1
</div>
</div>
</div>
<div class="box2">
</div>
</div>
<div class="d1">
</div>
<div class="d2">
</div>
</div>