如何使flexbox容器滚动?

问题描述

我有一个垂直的flexbox容器，在上面设置了一个特定的高度，并设置为在溢出时垂直滚动.问题在于，如果弹性容器的内容溢出，则弹性容器将不会滚动.这是一个演示我在说什么的插件: http://plnkr.co/edit/3t4cuxMSGuNr88u0Whdl?p =预览.

I have a vertical flexbox container on which I set a specific height and set it to scroll vertically when overflows. The problem is that the flex container won't scroll if its content overflows. Here is a plunker that demonstrate what i'm talking about: 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会缩小其项目以使其内容适合高度边界内的内容，而block盒只会滚动.在这种意义上，我该如何强制Flexbox不要缩小其项目并使其表现得像Blockbox一样?

As you can see, I have there two identical boxes - the first one is a flex-box (display: flex) and the other one is a block-box (display: block). I set the height for both of them, but the flexbox will shrink its items to fit its contents inside the height boundaries, while the block-box will just scroll. How can I force the flexbox not to shrink its items and to behave like the block-box in that sense?

谢谢.

推荐答案

尝试设置一个flex-basis值，并使其不增大或缩小:

Try, set a flex-basis value, and make it to not grow or shrink:

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

或者，如果您确实需要flex: 1 0 200px;，请按要求增长.

Or, flex: 1 0 200px; if you do need them to grow as needed.

jsFiddle

jsFiddle

这篇关于如何使flexbox容器滚动?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！