Scrollable div effects to its outside div

Question

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.

The reason is flexbox. You can learn more [here](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) — Dekel, Aug 12 '16 at 03:29
Instead of `height: 100px` on `.header`, use `flex: 0 0 100px`. See **The `flex-shrink` factor** in this answer: http://stackoverflow.com/a/34355447/3597276 — Michael Benjamin, Aug 12 '16 at 04:09

score 3 · Answer 1 · answered Aug 12 '16 at 03:47

3

I believe you already have the answer there. ;)

Reason is flex has default shrink value of 1. So you have to change it to 0 in order to reset.

.item {
  flex-shrink: <number>; /* default 1 */
}

Read: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

answered Aug 12 '16 at 03:47

Jerad Rutnam

1,536
1
14
29

Then, why does the ".content" div of the first code not grow? It should grow as large as possible – Nigiri Aug 12 '16 at 04:04
I understand now. It is because it is not necessary to grow. – Nigiri Aug 12 '16 at 04:08
@Nigiri, the `.content` div of the first code version *does grow*. It covers all the remaining height of the container. – Michael Benjamin Aug 12 '16 at 04:12

Dekel · Accepted Answer · 2016-08-12T04:17:01.627

3

"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.

edited Aug 12 '16 at 04:17

answered Aug 12 '16 at 04:10

Dekel

60,707
10
101
129

"the container has the ability to alter the width/height of it's items" I understand perfectly now. Thank you. – Nigiri Aug 12 '16 at 04:16

Scrollable div effects to its outside div

2 Answers2