how to correctly make flex-box children to scroll

Question

I'm stuck and can't make content to correctly scroll while facing a few of nested flex-boxes. Here is my css:

html,body,#root{
   width:100%;
   height:100%;
   padding:0;
   margin:0;
}
.flex-fill{
   height:100%;
   width:100%;
   display:flex;
   align-items:stretch;
}
.flex-fill>div:last-child{
   flex-grow:1;
}
.flex-col{
   flex-direction:column;
}

<div id='root'>
  <div class='flex-fill flex-col'><!--actually scrolling div-->
     <div style="flex:0 0 35px"><h1>main title</h1></div>
     <div>
        <div class='flex-fill flex-col'>
           <div style="flex:0 0 30px"><h2>subtitle</h2></div>
           <div class='flex-fill'>
              <div style="flex:0 0 30%">...left side nav list...</div>
              <div class='flex-fill flex-col'>
                 <div style="flex:0 0 25px">...data header...</div>
                 <!--I hope the content of this div is scroll-able-->
                 <div style="overflow-y:scroll">...data list...</div>
              </div>
           </div>
        </div>
     </div>
  </div>
</div>

The data list contained in the inner most div is very long and I want to make it scrollable. But in the fact the above codes make whole content of the root div scrolling. Have I misunderstanding about flex or overflow? How can I fix the other parts and just scroll the data list?

/*Are these supposed to be comments*/? If so, HTML comments a done like this . Anyway, from what I can see here, it won't scroll because it's allowed to just get as big as it needs to be to display the content. For example, add `max-height: 50px;` to the div that you want to scroll, and you will then need to scroll if the content is higher than 50px. — JoeP, Aug 13 '18 at 15:23
Sorry, I made mistakes. I typed codes here manually taking /**/ as comment for granted. There is no such thing in real codes. The real codes are written in React and lengthy. I will check the ultimate codes again in browser and amend my question. — Willi, Aug 13 '18 at 23:24
And I can't apply a height i.e. 50px to the data list container div, I hope it occupy the the whole remain space. — Willi, Aug 14 '18 at 01:36

JoeP · Answer 1 · 2018-08-15T12:43:19.990

2

Answer updated to keep your HTML structure the same. Inline styles removed and added as classes:

html,body{
   height:100%;
   padding:0;
   margin:0;
}
#root {
  height: 100%;
 display: flex;
}
.flex-fill{
   height:100%;
   display:flex;
   align-items:stretch;
}
.flex-col{
   flex-direction:column;
   display: flex;
   flex: 1 0 0;
   height: 100%;
}
.flex-row{
   flex-direction:row;
   display: flex;
   height: 100%;
}
.scrolling-div {
 height: 100%;
 overflow-y: scroll;
}

<div id='root'>
  <div class='flex-fill flex-col'>
     <div><h1>main title</h1></div>
     <div class="flex-col">
        <div class='flex-col'>
           <div><h2>subtitle</h2></div>
           <div class="flex-row">
              <div>...left side nav list...</div>
              <div class='flex-col'>
                 <div>...data header...</div>
                 <!--Now Scrolls-->
                 <div class="scrolling-div">
     ...scrolling data list...<br />
     ...scrolling data list...<br />
     ...scrolling data list...<br />
     ...scrolling data list...<br />
     </div>
              </div>
           </div>
        </div>
     </div>
  </div>
</div>

edited Aug 15 '18 at 12:43

answered Aug 14 '18 at 10:21

JoeP

856
4
15
29

Your codes changed my hierarchical structure however. I am writing a React app and have to give up bits of DOM structure simplicity and lower nesting depth to keep my components system logically. My ideal goal is to find an answer telling me how to correctly combine flex box and scroll-ability at any nesting depth. I found a deeper discussion [here](https://stackoverflow.com/questions/21515042/scrolling-a-flexbox-with-overflowing-content) , but it still don't solve my problem. Now I use css calc(100%- n) function to fill remainder space instead of flex-box and the problem is solved. – Willi Aug 15 '18 at 11:16
@WelsonZhong I've updated my answer to keep the structure the same. – JoeP Aug 15 '18 at 12:44
Your method works. What is the magic? Does the replacing flex-grow with height:100% fulfill the work? It seems that flex-grow just stretches content to fill space but doesn't give out content size information that overflow needs to work, so overflow can't work based on flex-grow. That is just my guess after coming across this problem. If you have some docs explaining your answer or my suspicion, I am eager to learn it. – Willi Aug 16 '18 at 03:13
Setting scroll-able child height to 100% makes scrolling works. But it also introduces a new problem. Since the child has the same height as parent, it will make its parent occupies more space than the grandfather given. **parent height=header height+parent height** The last one "parent height" comes from setting the scroll-able child height to 100%. That makes the father begin scrolling. If you forbid the father to scroll by setting overflow=hidden, then the last part of the scroll-able children (height = parent height-header height) wouldn't be visible even scrolling to the bottom. – Willi Aug 16 '18 at 07:04

Girisha C · Answer 2 · 2018-08-14T18:33:27.113

@Welson Zhong, please have a look at the below working snippet, please look it in Full page view, hope it helps now :)

note: too much flex kills flex ;) that was the issue with your code.

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
body {
  display: flex;
  flex-direction: column;
  font-family: sans-serif;
  font-size: 18px;
}
.main {
  display: flex;
  flex-direction: row;
  flex: 1 0 auto;
}
.sidebar {
  flex: 1 auto;
}
.content {
  display: flex;
  flex-flow: column nowrap;
  flex: 3 0px;
}
h1,h2,.data-header {
  flex: none;
}

/* below css is for visual purpose only */
.main *:not(.content) {
  box-shadow: inset 0 0 0 1px #ccc;
  padding: 10px;
}

<h1>main title</h1>
<h2>sub title</h2>
<div class="main">
  <div class="sidebar">
    ...left side nav list...
  </div>
  <div class="content">
    <div class="data-header">...data header...</div>
    <div style="overflow-y:scroll; flex: auto">...data list...</div>
  </div>
</div>

I am so sorry that is a typo while posting question. It is flex-direction in the fact. I write codes using IDE and such kinds of typos will be indicated automatically. It would be better to find out my problem in rendering structure. — Willi, Aug 13 '18 at 23:22
please have a look at the above updated snippet, now it fixes your problem in rendering structure, please look it in `Full page` view — Girisha C, Aug 14 '18 at 09:14

how to correctly make flex-box children to scroll

2 Answers2