Flexbox - 可滚动容器包含的 Flex 项目内的元素未正确呈现

Question

我正在尝试将我的一个网站转换为 flexbox，但遇到了一个涉及在 flex 容器中垂直滚动的问题。 Firefox 似乎可以正确呈现它，但 Chrome/Safari 却没有。 Here's a link to the code.

.container {
  height: 200px;
  border: solid 1px #000;
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
}

.item {
  border: solid 1px red;
  padding: 20px;
  display: flex;
  justify-content: space-between;
}

.item div {
  border: solid 1px green;
}

<div class="container">
  <div class="item">
    <div>box 1</div>
    <div>box 2</div>
  </div>
  <div class="item">
    <div>box 1</div>
    <div>box 2</div>
  </div>
  <div class="item">
    <div>box 1</div>
    <div>box 2</div>
  </div>
  <div class="item">
    <div>box 1</div>
    <div>box 2</div>
  </div>
  <div class="item">
    <div>box 1</div>
    <div>box 2</div>
  </div>
  <div class="item">
    <div>box 1</div>
    <div>box 2</div>
  </div>
  <div class="item">
    <div>box 1</div>
    <div>box 2</div>
  </div>
  <div class="item">
    <div>box 1</div>
    <div>box 2</div>
  </div>
  <div class="item">
    <div>box 1</div>
    <div>box 2</div>
  </div>
  <div class="item">
    <div>box 1</div>
    <div>box 2</div>
  </div>
</div>

由于某种原因，框 1 和 2 文本没有在弹性项目内正确呈现。谁能向我解释这里发生了什么以及如何解决它？

谢谢！

Answer 1

要获得 20 像素的内边距，请将 flex-shrink: 0; 添加到 .item 规则中，它将按预期工作。

它现在不起作用的原因是很多项目都适合200px高container，所以items只是先折叠，因为flex收缩默认为1，这意味着它们被允许收缩，然后，当他们不能再这样做时，他们开始滚动。

如果你让父级更高或删除一些项目，你会看到它的行为是正确的。

.container {
  height: 200px;
  border: solid 1px #000;
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
}

.item {
  flex-shrink: 0;
  border: solid 1px red;
  padding: 20px;
  display: flex;
  justify-content: space-between;
}

.item div {
  border: solid 1px green;
}

<div class="container">
  <div class="item">
    <div>box 1</div>
    <div>box 2</div>
  </div>
  <div class="item">
    <div>box 1</div>
    <div>box 2</div>
  </div>
  <div class="item">
    <div>box 1</div>
    <div>box 2</div>
  </div>
  <div class="item">
    <div>box 1</div>
    <div>box 2</div>
  </div>
  <div class="item">
    <div>box 1</div>
    <div>box 2</div>
  </div>
  <div class="item">
    <div>box 1</div>
    <div>box 2</div>
  </div>
  <div class="item">
    <div>box 1</div>
    <div>box 2</div>
  </div>
  <div class="item">
    <div>box 1</div>
    <div>box 2</div>
  </div>
  <div class="item">
    <div>box 1</div>
    <div>box 2</div>
  </div>
</div>

Answer 2

只需添加align-items:center 即可获得相同的效果

更新css部分

.item {
  border: solid 1px red;
  padding: 20px;
  display: flex;
  align-items: center; /*Add this */
  justify-content: space-between;
}

.container {
  height: 200px;
  border: solid 1px #000;
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
}

.item {
  border: solid 1px red;
  padding: 20px;
  display: flex;
  align-items: center; /*Add this */
  justify-content: space-between;
}

.item div {
  border: solid 1px green;
}

<div class="container">
  <div class="item">
    <div>box 1</div>
    <div>box 2</div>
  </div>
  <div class="item">
    <div>box 1</div>
    <div>box 2</div>
  </div>
  <div class="item">
    <div>box 1</div>
    <div>box 2</div>
  </div>
  <div class="item">
    <div>box 1</div>
    <div>box 2</div>
  </div>
  <div class="item">
    <div>box 1</div>
    <div>box 2</div>
  </div>
  <div class="item">
    <div>box 1</div>
    <div>box 2</div>
  </div>
  <div class="item">
    <div>box 1</div>
    <div>box 2</div>
  </div>
  <div class="item">
    <div>box 1</div>
    <div>box 2</div>
  </div>
  <div class="item">
    <div>box 1</div>
    <div>box 2</div>
  </div>
  <div class="item">
    <div>box 1</div>
    <div>box 2</div>
  </div>
</div>

只需添加

.item {
  border: solid 1px red;
  padding: 20px;
  display: flex;
  align-items: center; /* Add this */
  justify-content: space-between;
}

Answer 3

要解决此问题，请对框 div 使用垂直对齐。我认为它与折叠填充有关。我选择了居中对齐，但 flex-start 和 flex-end 也可以。

.container {
  height: 200px;
  border: solid 1px #000;
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
}

.item {
  border: solid 1px red;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.item div {
  border: solid 1px green;
}

<div class="container">
  <div class="item">
    <div>box 1</div>
    <div>box 2</div>
  </div>
  <div class="item">
    <div>box 1</div>
    <div>box 2</div>
  </div>
  <div class="item">
    <div>box 1</div>
    <div>box 2</div>
  </div>
  <div class="item">
    <div>box 1</div>
    <div>box 2</div>
  </div>
  <div class="item">
    <div>box 1</div>
    <div>box 2</div>
  </div>
  <div class="item">
    <div>box 1</div>
    <div>box 2</div>
  </div>
  <div class="item">
    <div>box 1</div>
    <div>box 2</div>
  </div>
  <div class="item">
    <div>box 1</div>
    <div>box 2</div>
  </div>
  <div class="item">
    <div>box 1</div>
    <div>box 2</div>
  </div>