1

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>

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?

Thanks.

Stickers
  • 75,527
  • 23
  • 147
  • 186
gipouf
  • 1,221
  • 3
  • 15
  • 43

2 Answers2

2

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

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

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

jsFiddle

Stickers
  • 75,527
  • 23
  • 147
  • 186
2

You can always provide min-height and flex will respect that. See the updated Plunkr

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

Bikas
  • 2,709
  • 14
  • 32