CODEWITHSUNDEEP
htmlcssflexbox
gipouf
gipouf

Reputation: 1241

How to make a flexbox container to scroll?

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.

Upvotes: 1

Views: 265

Answers (2)

Stickers
Stickers

Reputation: 78676

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

Upvotes: 2

Bikas
Bikas

Reputation: 2759

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

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

Upvotes: 2

Related Questions