Scrolling a flexbox with overflowing content

Question

Here s the code I m using to achieve the above layout    x000D   x000D   header   x000D    height  50px  x000D    x000D   x000D   body   x000D    position  absolute  x000D    top  50px  x000D    right  0  x000D    bottom  0  x000D    left  0  x000D    display  flex  x000D    x000D   x000D   sidebar   x000D    width  140px  x000D    x000D   x000D   main   x000D    flex  1  x000D    display  flex  x000D    flex-direction  column  x000D    x000D   x000D   content   x000D    flex  1  x000D    display  flex  x000D    x000D   x000D   column   x000D    padding  20px  x000D    border-right  1px solid  999  x000D    x000D   lt div class  header  gt Main header lt  div gt  x000D   lt div class  body  gt  x000D     lt div class  sidebar  gt Sidebar lt  div gt  x000D   x000D     lt div class  main  gt  x000D       lt div class  page-header  gt Page Header  Content columns are below  lt  div gt  x000D       lt div class  content  gt  x000D         lt div class  column  gt Column 1 lt  div gt  x000D         lt div class  column  gt Column 1 lt  div gt  x000D         lt div class  column  gt Column 1 lt  div gt  x000D       lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    I omitted the code used for styling  You can see all of it in the pen     The above works  but when the content area s content overflows  it makes the whole page scroll  I only want the content area itself to scroll  so I added overflow  auto to the content div   The problem with this now is that the columns themselves don t extend beyond their parents height  so the borders are cut off there too   Here s the pen showing the scrolling issue   How can I set the content area to scroll independently  while still having its children extend beyond the content box s height

User · Answer

Working with position absolute  along with flex   Position the flex item with position  relative  Then inside of it  add another  lt div gt  element with   position  absolute  top  0  left  0  right  0  bottom  0    This extends the element to the boundaries of its relative-positioned parent  but does not allow to extend it  Inside  overflow  auto  will then work as expected    the code snippet included in the answer - Click on  and then click on  after running the snippet OR Click here for the CODEPEN  The result      x000D   x000D   all-0   x000D    top  0  x000D    bottom  0  x000D    left  0  x000D    right  0  x000D    x000D  p   x000D    text-align  justify  x000D    x000D   bottom-0   x000D    bottom  0  x000D    x000D   overflow-auto   x000D    overflow  auto  x000D    x000D   lt link href  https   maxcdn bootstrapcdn com bootstrap 4 0 0-beta 2 css bootstrap min css  rel  stylesheet   gt  x000D   x000D   x000D   lt div class  p-5 w-100  gt  x000D     lt div class  row bg-dark m-0  gt  x000D       lt div class  col-sm-9 p-0 d-flex flex-wrap  gt  x000D         lt  -- LEFT-SIDE - ROW-1 -- gt  x000D         lt div class  row m-0 p-0  gt  x000D           lt  -- CARD 1 -- gt  x000D           lt div class  col-md-8 p-0 d-flex  gt  x000D             lt div class  my-card-content bg-white p-2 m-2 d-flex flex-column  gt  x000D               lt img class  img img-fluid  src  https   via placeholder com 700x250  gt  x000D               lt h4 gt Heading 1 lt  h4 gt  x000D               lt p gt  x000D                Contrary to popular belief  Lorem Ipsum is not simply random text  It has roots in a piece of classical Latin literature from 45 BC  making it over 2000 years old    x000D             lt  div gt  x000D           lt  div gt  x000D           lt  -- CARD 2 -- gt  x000D           lt div class  col-md-4 p-0 d-flex  gt  x000D             lt div class  my-card-content bg-white p-2 m-2 d-flex flex-column  gt  x000D               lt img class  img img-fluid  src  https   via placeholder com 400x250  gt  x000D               lt h4 gt Heading 1 lt  h4 gt  x000D               lt p gt  x000D                Contrary to popular belief  Lorem Ipsum is not simply random text  It has roots in a piece of classical Latin literature from 45 BC  making it over 2000 years old    x000D             lt  div gt  x000D           lt  div gt  x000D         lt  div gt  x000D         lt div class  row m-0  gt  x000D           lt  -- CARD 3 -- gt  x000D           lt div class  col-md-4 p-0 d-flex  gt  x000D             lt div class  my-card-content bg-white p-2 m-2 d-flex flex-column  gt  x000D               lt img class  img img-fluid  src  https   via placeholder com 400x250  gt  x000D               lt h4 gt Heading 1 lt  h4 gt  x000D               lt p gt  x000D                Contrary to popular belief  Lorem Ipsum is not simply random text  It has roots in a piece of classical Latin literature from 45 BC  making it over 2000 years old    x000D             lt  div gt  x000D           lt  div gt  x000D           lt  -- CARD 4 -- gt  x000D           lt div class  col-md-4 p-0 d-flex  gt  x000D             lt div class  my-card-content bg-white p-2 m-2 d-flex flex-column  gt  x000D               lt img class  img img-fluid  src  https   via placeholder com 400x250  gt  x000D               lt h4 gt Heading 1 lt  h4 gt  x000D               lt p gt  x000D                Contrary to popular belief  Lorem Ipsum is not simply random text  It has roots in a piece of classical Latin literature from 45 BC  making it over 2000 years old    x000D             lt  div gt  x000D           lt  div gt  x000D           lt  -- CARD 5-- gt  x000D           lt div class  col-md-4 p-0 d-flex  gt  x000D             lt div class  my-card-content bg-white p-2 m-2 d-flex flex-column  gt  x000D               lt img class  img img-fluid  src  https   via placeholder com 400x250  gt  x000D               lt h4 gt Heading 1 lt  h4 gt  x000D               lt p gt  x000D                Contrary to popular belief  Lorem Ipsum is not simply random text  It has roots in a piece of classical Latin literature from 45 BC  making it over 2000 years old    x000D             lt  div gt  x000D           lt  div gt  x000D         lt  div gt  x000D       lt  div gt  x000D       lt div class  col-sm-3 p-0  gt  x000D         lt div class  bg-white m-2 p-2 position-absolute all-0 d-flex flex-column  gt  x000D           lt h4 gt Social Sidebar    lt  h4 gt  x000D           lt hr   gt  x000D           lt div class  d-flex overflow-auto  gt  x000D             lt p gt  x000D              Topping candy tiramisu souffl   fruitcake ice cream chocolate bar  Bear claw ice cream chocolate bar donut sweet tart  Pudding cupcake danish apple pie apple pie  Halva fruitcake ice cream chocolate bar  Bear claw ice cream chocolate bar donut sweet tart  x000D              opping candy tiramisu souffl   fruitcake ice cream chocolate bar  Bear claw ice cream chocolate bar donut sweet tart  Pudding cupcake danish apple pie apple pie  Halva fruitcake ice cream chocolate bar  Bear claw ice cream chocolate bar donut sweet tart  x000D              opping candy tiramisu souffl   fruitcake ice cream chocolate bar  Bear claw ice cream chocolate bar donut sweet tart  Pudding cupcake danish apple pie apple pie  Halva fruitcake ice cream chocolate bar  Bear claw ice cream chocolate bar donut sweet tart  x000D              Pudding cupcake danish apple pie apple pie  Halvafruitcake ice cream chocolate bar  Bear claw ice cream chocolate bar donut sweet tart  Pudding cupcake danish apple pie apple pie  Halvafruitcake ice cream chocolate bar  Bear claw ice cream x000D              chocolate bar donut sweet tart  Pudding cupcake danish apple pie apple pie  Halvafruitcake ice cream chocolate bar  Bear claw ice cream chocolate bar donut sweet tart  Pudding cupcake danish apple pie apple pie  Halvafruitcake ice cream chocolate x000D              bar  Bear claw ice cream chocolate bar donut sweet tart  Pudding cupcake danish apple pie apple pie  Halva x000D           lt  div gt  x000D         lt  div gt  x000D       lt  div gt  x000D     lt  div gt  x000D   x000D   x000D    Good Luck

User · Answer

A little late but this could help  http   webdesign tutsplus com tutorials how-to-make-responsive-scrollable-panels-with-flexbox--cms-23269  Basically you need to put html body to height  100    and wrap all your content into a  lt div class  wrap  gt   lt  -- content -- gt   lt  div gt   CSS   html  body     height  100       wrap     height  100vh    display  flex      Worked for me  Hope it helps

User · Answer

One issue that I ve come across is that to have a scrollbar a n element needs a height to be specified  and not as a     The trick is to nest another set of divs within each column  and set the column parent s display to flex with flex-direction  column   lt style gt      html  body           height  100           margin  0          padding  0             body           overflow-y  hidden          overflow-x  hidden          color  white              base-container           display  flex          flex  1          flex-direction  column          width  100           height  100           overflow-y  hidden          align-items  stretch              title           flex  0 0 50px          color  black              container           flex  1 1 auto          display  flex          flex-direction  column                  container  header               flex  0 0 50px              background-color  red                      container  body               flex  1 1 auto              display  flex              flex-direction  row                          container  body  left                   display  flex                  flex-direction  column                  flex  0 0 80px                  background-color  blue                                 container  body  left  content                   container  body  main  content                   container  body  right  content                       flex  1 1 auto                      overflow-y  auto                      height  100px                                     container  body  main  content noscrollbar                       overflow-y  hidden                                  container  body  main                   display  flex                  flex-direction  column                  flex  1 1 auto                  background-color  green                              container  body  right                   display  flex                  flex-direction  column                  flex  0 0 300px                  background-color  yellow                  color  black                      test           margin  5px 5px          border  1px solid white          height  calc 100  - 10px          lt  style gt   And here s the html   lt div class  quot base-container quot  gt       lt div class  quot title quot  gt          Title      lt  div gt       lt div class  quot container quot  gt           lt div class  quot header quot  gt              Header          lt  div gt           lt div class  quot body quot  gt               lt div class  quot left quot  gt                   lt div class  quot content quot  gt                       lt ul gt                           lt li gt 1 lt  li gt                           lt li gt 2 lt  li gt                           lt li gt 3 lt  li gt                           lt li gt 4 lt  li gt                           lt li gt 5 lt  li gt                           lt li gt 6 lt  li gt                           lt li gt 7 lt  li gt                           lt li gt 8 lt  li gt                           lt li gt 9 lt  li gt                           lt li gt 10 lt  li gt                           lt li gt 12 lt  li gt                           lt li gt 13 lt  li gt                           lt li gt 14 lt  li gt                           lt li gt 15 lt  li gt                           lt li gt 16 lt  li gt                           lt li gt 17 lt  li gt                           lt li gt 18 lt  li gt                           lt li gt 19 lt  li gt                           lt li gt 20 lt  li gt                           lt li gt 21 lt  li gt                           lt li gt 22 lt  li gt                           lt li gt 23 lt  li gt                           lt li gt 24 lt  li gt                       lt  ul gt                   lt  div gt               lt  div gt               lt div class  quot main quot  gt                   lt div class  quot content noscrollbar quot  gt                       lt div class  quot test quot  gt Test lt  div gt                   lt  div gt               lt  div gt               lt div class  quot right quot  gt                   lt div class  quot content quot  gt                       lt div gt Right lt  div gt                       lt div gt Right lt  div gt                       lt div gt Right lt  div gt                       lt div gt Right lt  div gt                       lt div gt Right lt  div gt                       lt div gt Right lt  div gt                       lt div gt Right lt  div gt                       lt div gt Right lt  div gt                       lt div gt Right lt  div gt                       lt div gt Right lt  div gt                       lt div gt Right lt  div gt                       lt div gt Right lt  div gt                       lt div gt Right lt  div gt                       lt div gt Right lt  div gt                       lt div gt Right lt  div gt                       lt div gt Right lt  div gt                       lt div gt Right lt  div gt                       lt div gt Right lt  div gt                       lt div gt Right lt  div gt                       lt div gt Right lt  div gt                       lt div gt Right lt  div gt                       lt div gt Right lt  div gt                       lt div gt Right lt  div gt                       lt div gt Right lt  div gt                       lt div gt Right lt  div gt                       lt div gt Right lt  div gt                       lt div gt Right lt  div gt                       lt div gt Right lt  div gt                       lt div gt Right lt  div gt                       lt div gt Right lt  div gt                       lt div gt Right lt  div gt                       lt div gt Right lt  div gt                       lt div gt Right lt  div gt                       lt div gt Right lt  div gt                       lt div gt Right lt  div gt                       lt div gt Right lt  div gt                       lt div gt Right lt  div gt                       lt div gt Right lt  div gt                       lt div gt Right lt  div gt                       lt div gt Right lt  div gt                       lt div gt Right lt  div gt                       lt div gt Right lt  div gt                       lt div gt Right lt  div gt                       lt div gt Right lt  div gt                       lt div gt Right lt  div gt                       lt div gt Right lt  div gt                       lt div gt Right lt  div gt                       lt div gt Right lt  div gt                       lt div gt Right lt  div gt                       lt div gt Right lt  div gt                       lt div gt Right lt  div gt                       lt div gt Right lt  div gt                       lt div gt Right lt  div gt                       lt div gt Right lt  div gt                       lt div gt End lt  div gt                   lt  div gt               lt  div gt           lt  div gt       lt  div gt   lt  div gt   https   jsfiddle net LiamFlavelle czpjdfr4

User · Answer

list-wrap     width  355px    height  100     position  relative      list       position  absolute      top  0      bottom  0      overflow-y  auto      width  100

User · Answer

I just solved this problem very elegantly after a lot of trial and error   Check out my blog post  http   geon github io programming 2016 02 24 flexbox-full-page-web-app-layout  Basically  to make a flexbox cell scrollable  you have to make all its parents overflow  hidden   or it will just ignore your overflow settings and make the parent larger instead

User · Answer

The following CSS changes in bold  plus a bunch of content in the columns to test scrolling  will work   See the result in this Pen    content   flex  1  display  flex   height  1px     column   padding  20px  border-right  1px solid  999  overflow  auto     The trick seems to be that a scrollable panel needs to have a height literally set somewhere  in this case  via its parent   not just determined by flexbox   So even height  1px works   The flex-grow 1 will still size the panel to fit properly

User · Answer

You can simply put overflow property to  quot auto quot   x000D   x000D        contain            background-color   999999            margin  5px             padding  10px 5px            width  20             height  20             overflow  auto                                x000D   x000D   x000D   contain is one of my flex-item class name result   scroll bar seen properly

User · Answer

You can use a position  absolute inside a position  relative https   codepen io Iquixe pen RwRzGrM

User · Answer

I ve spoken to Tab Atkins  author of the flexbox spec  about this  and this is what we came up with   HTML    lt div class  content  gt       lt div class  box  gt           lt div class  column  gt Column 1 lt  div gt           lt div class  column  gt Column 2 lt  div gt           lt div class  column  gt Column 3 lt  div gt       lt  div gt   lt  div gt    CSS    content       flex  1      display  flex      overflow  auto      box       display  flex      min-height  min-content     needs vendor prefixes        Here are the pens    Short columns being stretched  Longer columns overflowing and scrolling    The reason this works is because align-items  stretch doesn t shrink its items if they have an intrinsic height  which is accomplished here by min-content

User · Answer

Add this   align-items  flex-start    to the rule for  content      That fixes it in your pen for me  at least  in both Firefox  amp  Chrome    By default   content has align-items  stretch  which makes it size all of its auto-height children to match its own height  per http   dev w3 org csswg css-flexbox  algo-stretch  In contrast  the value flex-start lets the children compute their own heights  and align themselves at its starting edge  and overflow  and trigger a scrollbar

User · Answer

The solution for this problem is just to add overflow  auto  to the  content for making the content wrapper scrollable   Furthermore  there are circumstances occurring along with Flexbox wrapper and overflowed scrollable content like this codepen   The solution is to add overflow  hidden  or auto   to the parent of the wrapper  set with overflow  auto   around large contents

[css] Scrolling a flexbox with overflowing content

Working with `position:absolute;` along with `flex`:

Examples related to css

Examples related to layout

Examples related to multiple-columns

Examples related to flexbox