flex:1 not scroll inner div which height oversize

Question

I use flex to show top, center, bottom, and I want inner div id=flex_child_center_overflow_div to be scrollable in flex_child_center div. But the result is not as expected, the flex_child_center_overflow_div show full screen.

http://jsfiddle.net/oudioppa/Ld0h3xer/3

<div id="root" style="position:absolute;top:0;left:0;right:0;bottom:0;">
   <div id="flex_container" style="height:100%;display:flex;flex-direction:column;">
      <div id="flex_child_top" style="height:50px;background-color:yellow;"></div>
      <div id="flex_child_center" style="flex:1;background-color:blue;display:block;">
         <div id="flex_child_center_overflow" style="height:100%;background-color:lightgreen;overflow-y:auto;">
            <div id="flex_child_center_overflow_div"  style="height:1000px;background-color:lightblue"></div>
         </div>
      </div>
      <div id="flex_child_bottom" style="height:50px;background-color:green;"></div>
   </div>
</div>

min-height:0 on flex_child_center – Temani Afif Feb 26 '21 at 07:59 — Temani Afif, Feb 26 '21 at 07:59
@TemaniAfif It works! Thanks a lot. – oudi Oct 18 '21 at 01:58 — oudi, Oct 18 '21 at 01:58

flex:1 not scroll inner div which height oversize

0 Answers0