CODEWITHSUNDEEP
htmlcssflexboxoverflow
Rodrigo Perez
Rodrigo Perez

Reputation: 13

Flex-box with child with overflow-x:auto and flex-grow:1

I'm trying to create a header with some items in a flex-box.

One of these items is a div "box" with flex-grow:1 to fill the remaining space of the line.

The div "box" has overflow-x: auto to create a horizontal scroll if necessary.

The problem is that if I do not set a max-width, the scroll of the div "box" does not appears and some items of the container go out of the container bounds...

I want to use all the remaining space used by the flex-grow:1. How can I solve this?

JSFiddle

.container {
  display: flex;
  width: 400px;
  background-color: #fff;
}
.container > div {
  flex-shrink: 0;
}
.box {
  flex-grow: 1;
  border: 1px solid #ff0000;
  display: flex;
  overflow-x: auto;
  //max-width: 180px;

}
.scroll-box {
  overflow-x: auto;
  //  max-width: 180px;
  display: flex;
}
.box > div {
  flex-shrink: 0;
  width: 80px;
  border: 1px solid black;
  margin: 2px;
  padding: 2px;
}
<div class="container">
  <div>element1</div>
  <div class="box">
    <div>A</div>
    <div>B</div>
    <div>C</div>
    <div>D</div>
  </div>
  <div>element 2</div>
  <div>element 3</div>
</div>

Upvotes: 1

Views: 1503

Answers (1)

Michael Benjamin
Michael Benjamin

Reputation: 371301

Instead of flex-grow: 1 use flex: 1.

When you use flex-grow you set that particular property. But the other flexibility properties remain their default values. Namely, flex-shrink: 0 and flex-basis: auto.

With flex: 1, you're switching to:

  • flex-grow: 1
  • flex-shrink: 1
  • flex-basis: 0

So, the box is now allowed to shrink. But, more importantly, instead of the width of the box being auto (content-driven) it starts from 0. This is what enables the scroll function.

Upvotes: 3

Related Questions