Flexbox: Chrome is fine, Firefox and Edge won't scroll all the way down

Question

I have a three column flexbox layout, where the first column is a list of items with a filter, the second column is a long body of text, and the third column an infinitely-scrolling list. In Chrome, the left-side list behaves as expected. It scrolls to the bottom, and reveals the info paragraph. In Firefox and Edge, however, the list does not scroll to the bottom: it cuts off at the bottom of the page.

Here's the markup:

<div class="container">
  <div class="left-sidebar">
    <div class="filter-wrap">...</div>
    <div class="list-wrap">
      <ul class="list">...</ul>
      <p class="info">...</p>
    </div>
  </div>
  <div class="main-content">...</div>
  <div class="right-sidebar">...</div>
</div>

And the CSS concerning the left-hand side:

.container {
  display: flex;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.left-sidebar {
  display: flex;
  flex-grow: 1;
  flex-basis: 0px;
  flex-direction: column;
  overflow-y: hidden;
}

.filter-wrap {
  position: relative;
  padding: 20px 20px 0 20px;
}

.list-wrap {
  font-size: 14px;
  flex-grow: 1;
  flex-basis: 0px;
  overflow-y: auto;
  padding: 15px 20px 15px 20px;
}

.list-wrap ul { word-break: break-all; }
.info {
  cursor: pointer;
  background: none;
}

You didn't post a working example of the problem, so I can't verify this, but try adding `min-height: 0` to your containers. That should make the layout work across browsers. — Michael Benjamin, Jul 18 '17 at 14:01

score -1 · Accepted Answer · answered Jul 18 '17 at 14:12

-1

It looks like the problem was actually much higher up the chain with a bad height, so I wasn't even looking in the right place.

answered Jul 18 '17 at 14:12

Kevin Whitaker

12,435
12
51
89

It would be great if you had provided the solution that helped you. Otherwise your solution is not really a solution. – ehtio Jun 01 '23 at 14:09

Flexbox: Chrome is fine, Firefox and Edge won't scroll all the way down

1 Answers1