flexbox layout: take remaining space but do not expand more than 100% of remaining space

Question

I have the following code. I want the second div to take the remaining space of the page and allow inner content to scroll if it overflows. But it does not seem to work.

<div style="max-height: 100vh; height: 100vh">
    <div style="height: 100%; display: flex; flex-direction: column">
       <div style="flex: 0 1 auto">
          This is some fixed heighted content
       </div>
       <div style="flex: 1 1 0%; overflow: auto">
          A lot of text content here that overflows the remaining space.
          So this div should take up the remaining available space (100vh - space of div above) 
          and the inner content should become scrollable
          But it ends up expanding the div to the text content and thus the whole screen becomes 
          scrollable instead of just the div
       </div>
    </div>
</div>

Any help would be much appreciated :)

your issue is caused by a typo, you are not closing the first div correctly — Temani Afif, Jul 25 '21 at 10:01
@TemaniAfif Sorry but that's not there in my actual code. This is just a simplified version of my code. I'll fix the typo — Ujjwal Chadha, Jul 25 '21 at 16:18

score 1 · Accepted Answer · answered Jul 25 '21 at 07:29

You did not close properly your div <div/> instead </div>, Also, less CSS can be used

body{margin:0}

<div style="height: 100vh; display: flex; flex-direction: column;">
   <div>
      This is some fixed heighted content
   </div>
   <div style="flex:1;overflow:auto;">
      A lot of text content here that overflows the remaining space.
      So this div should take up the remaining available space (100vh - space of div above) 
      and the inner content should become scrollable
      But it ends up expanding the div to the text content and thus the whole screen becomes 
      scrollable instead of just the divA lot of text content here that overflows the remaining space.
      So this div should take up the remaining available space (100vh - space of div above) 
      and the inner content should become scrollable
      But it ends up expanding the div to the text content and thus the whole screen becomes 
      scrollable instead of just the divA lot of text content here that overflows the remaining space.
      So this div should take up the remaining available space (100vh - space of div above) 
      and the inner content should become scrollable
      But it ends up expanding the div to the text content and thus the whole screen becomes 
      scrollable instead of just the divA lot of text content here that overflows the remaining space.
      So this div should take up the remaining available space (100vh - space of div above) 
      and the inner content should become scrollable
      But it ends up expanding the div to the text content and thus the whole screen becomes 
      scrollable instead of just the divA lot of text content here that overflows the remaining space.
      So this div should take up the remaining available space (100vh - space of div above) 
      and the inner content should become scrollable
      But it ends up expanding the div to the text content and thus the whole screen becomes 
      scrollable instead of just the divA lot of text content here that overflows the remaining space.
      So this div should take up the remaining available space (100vh - space of div above) 
      and the inner content should become scrollable
      But it ends up expanding the div to the text content and thus the whole screen becomes 
      scrollable instead of just the div
   </div>
</div>

score 0 · Answer 2 · answered Jul 25 '21 at 07:11

0

a "max-height" css property might be needed here

answered Jul 25 '21 at 07:11

JohnPion

45
1

score -1 · Answer 3 · answered Jul 25 '21 at 09:15

-1

Your mistake in the code was when you did not close the div tag at the end.

answered Jul 25 '21 at 09:15

fatemeh kazemi

516
6
10

flexbox layout: take remaining space but do not expand more than 100% of remaining space

3 Answers3

Linked