Question

我有一个垂直的flexbox容器，我在其上设置一个特定的高度，并将其设置为在溢出时垂直滚动。问题是如果内容溢出，flex容器将不会滚动。这是一个说明我正在谈论的内容：http://plnkr.co/edit/3t4cuxMSGuNr88u0Whdl?p=preview。

.flex-container {
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
  height: 600px;
  width: 400px;
}
.block-container {
  overflow-y: scroll;
  height: 600px;
  width: 400px;
  margin-left: 50px;
}
.item1 {
  height: 200px;
  background-color: red;
  margin-bottom: 1px;
}
.item2 {
  height: 200px;
  background-color: green;
  margin-bottom: 1px;
}
.item3 {
  height: 200px;
  background-color: blue;
  margin-bottom: 1px;
}

<div style="display: flex">
  <div class="flex-container">
    <p>Flex Container</p>
    <div class="item1">Text</div>
    <div class="item2">Text</div>
    <div class="item3">Text</div>
    <div class="item1">Text</div>
    <div class="item2">Text</div>
    <div class="item3">Text</div>
    <div class="item1">Text</div>
    <div class="item2">Text</div>
    <div class="item3">Text</div>
  </div>
  <div class="block-container">
    <p>Block Container</p>
    <div class="item1">Text</div>
    <div class="item2">Text</div>
    <div class="item3">Text</div>
    <div class="item1">Text</div>
    <div class="item2">Text</div>
    <div class="item3">Text</div>
    <div class="item1">Text</div>
    <div class="item2">Text</div>
    <div class="item3">Text</div>
  </div>
</div>

如您所见，我有两个相同的框 - 第一个是弹性框（display: flex），另一个是块框（display: block）。我为它们设置了高度，但是flexbox会缩小其项目以适应高度边界内的内容，而块框只会滚动。如何强制flexbox不缩小其项目，并在这种意义上表现得像块盒一样？

感谢。

Answer 1

尝试，设置flex-basis值，并使其不增长或缩小：

.item1, .item2, .item3 {
  flex: 0 0 200px;
}

或者flex: 1 0 200px;如果您确实需要它们根据需要增长。

<强> jsFiddle

Answer 2

您始终可以提供min-height，而flex会尊重这一点。请参阅更新的Plunkr

http://plnkr.co/edit/7rgo7BpWWtXsQqYbJvdU?p=preview

如何使flexbox容器滚动？

2 个答案: