Nigiri Nigiri - 3 months ago 12
CSS Question

Scrollable div effects to its outside div

See this code




html, body {
height: 100%;
width: 100%;
margin: 0;
}

#container {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
background-color: rgb(238, 235, 235);
}

.header {
background-color: rgb(126, 209, 171);
height: 100px;
}

.content {
flex-grow: 1;
background-color: rgb(209, 126, 165);
overflow-y: scroll;
}

.row {
height: 20px;
border-bottom: 1px solid black;
}

<div id="container">
<div class="header">hello</div>
<div class="content">
<div class="row">this is row</div>
<div class="row">this is row</div>
<div class="row">this is row</div>
</div>
</div>





This is fine. ".header"'s height is 100px after it is rendered.

But after I insert lots of ".row" div into ".content" div, ".header"'s height shrinks less than 100px.




html, body {
height: 100%;
width: 100%;
margin: 0;
}

#container {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
background-color: rgb(238, 235, 235);
}

.header {
background-color: rgb(126, 209, 171);
height: 100px;
}

.content {
flex-grow: 1;
background-color: rgb(209, 126, 165);
overflow-y: scroll;
}

.row {
height: 20px;
border-bottom: 1px solid black;
}

<div id="container">
<div class="header">hello</div>
<div class="content">
<div class="row">this is row</div>
<div class="row">this is row</div>
<div class="row">this is row</div>
<div class="row">this is row</div>
<div class="row">this is row</div>
<div class="row">this is row</div>
<div class="row">this is row</div>
<div class="row">this is row</div>
<div class="row">this is row</div>
<div class="row">this is row</div>
<div class="row">this is row</div>
<div class="row">this is row</div>
<div class="row">this is row</div>
<div class="row">this is row</div>
<div class="row">this is row</div>
<div class="row">this is row</div>
<div class="row">this is row</div>
<div class="row">this is row</div>
<div class="row">this is row</div>
<div class="row">this is row</div>
<div class="row">this is row</div>
<div class="row">this is row</div>
<div class="row">this is row</div>
<div class="row">this is row</div>
<div class="row">this is row</div>
<div class="row">this is row</div>
<div class="row">this is row</div>
</div>
</div>





I want to know why ".row" divs inside '.content' div effect to ".header" div, even though '.content' is scrollable.

I know I can fix it by giving ".header" "flex-shrink: 0" but I don't know why I have to do it.

Answer

"The main idea behind the flex layout is to give the container the ability to alter its items' width/height (and order) to best fill the available space (mostly to accommodate to all kind of display devices and screen sizes). A flex container expands items to fill available free space, or shrinks them to prevent overflow".

Taken from the background part from this guide (also in my comment).

The reason .row divs inside .content div effect to .header div, even though .content is that the container has the ability to alter the width/height of it's items - in order to best fill the space you have there.