Flexbox：Chrome 很好，Firefox 和 Edge 不会一直向下滚动

Question

我有一个三列 flexbox 布局，其中第一列是带有过滤器的项目列表，第二列是一长串文本，第三列是一个无限滚动的列表。在 Chrome 中，左侧列表的行为符合预期。它滚动到底部，并显示 info 段落。但是，在 Firefox 和 Edge 中，列表不会滚动到底部：它会在页面底部截断。

这是标记：

<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>

以及左侧的CSS：

.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;
}

Answer 1

看起来问题实际上是多链条上的高度不正确，所以我什至没有找对地方。

Flexbox：Chrome 很好，Firefox 和 Edge 不会一直向下滚动

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

html

css

firefox

flexbox

microsoft-edge