Div overflow scroll not working in Chrome

Question

I've made a div layout that looks and works exactly as I want it to do, in all browsers (haven't tested Safari), but not Chrome (!?).

HTML:

<div class="app-wrapper">
  <div class="page-header">
    header
  </div>
  <div class="page-content">
    <div class="component-container">
      <div class="list-container">
        <!-- lots of list items -->
      </div>
      <div class="content-container">
        <!-- lots of content -->
      </div>
    </div>
  </div>
</div>

CSS:

.app-wrapper
  height: 100%
  display: flex
  flex-direction: column

.page-header
  flex: 0 0 auto
  height: 80px

.page-content
  flex: 1 1 auto
  position: relative
  overflow: auto

.component-container
  display: flex
  height: 100%

.list-container
  height: 100%
  overflow: auto

.content-container
  width: 100%
  height: 100%
  overflow: auto

Here is a CodePen

Whats wrong and what can I do to make the list (yellow) and content (green) have their own overflow scroll like in all other browsers?

Thanks!

JoshKisb · Accepted Answer · 2017-12-14 17:30:27Z

2

Give page content a specific height otherwise its children will take full 100% browser height.

.page-content {
     height: 100%;
     ...

answered Dec 14, 2017 at 17:30

JoshKisb

7528 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

mottosson Over a year ago

Wow, I should probably take a break =P Thanks a lot, that did the trick!

Collectives™ on Stack Overflow

Div overflow scroll not working in Chrome

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related