Nested Flexbox with horizontal overflow

Question

I am using a nested flexbox layout.

I would like a left nav to always be 1/3rd of the page, and the right side always be 2/3rds.

The left nav should always stay in view.

The right side (an image carousel in my case) should always take up 2/3rds and have a horizontal scrollbar on the boxes.

In the code below, it simply stretches and ignores the overflow.

<div>
  Top Header (should stay in view)
</div>
<div style="display: flex">
  <div style="flex: 1 0 auto">
    LeftNav
  </div>
  <div style="flex: 2 0 auto">
    <div style="display: flex; flex-direction: row; overflow-x: scroll">
      <div style="background-color: blue; min-width: 400px; height: 500px">
      </div>
      <div style="background-color: red; min-width: 400px; height: 500px">
      </div>
      <div style="background-color: green; min-width: 400px; height: 500px">
      </div>
    </div>
  </div>

@MichaelCoker fixed - the right side is 2/3rds – Doug Jul 05 '17 at 19:09 — Doug, Jul 05 '17 at 19:09

score 9 · Accepted Answer · answered Jul 05 '17 at 19:16

Instead of flex-grow, which simply distributes free space in the container, use flex-basis, which explicitly sizes your items 1/3 and 2/3.

Then, because the default minimum width of flex items is min-width: auto, meaning they cannot be smaller than the size of their content, use min-width: 0 to override that default on the carousel.

<div>
  Top Header (should stay in view)
</div>
<div style="display: flex">
  <div style="flex: 0 0 33%">LeftNav</div>
  <div style="flex: 0 0 67%; min-width: 0;">
    <div style="display: flex; flex-direction: row; overflow-x: scroll">
      <div style="background-color: blue; min-width: 400px; height: 500px">
      </div>
      <div style="background-color: red; min-width: 400px; height: 500px">
      </div>
      <div style="background-color: green; min-width: 400px; height: 500px">
      </div>
    </div>
  </div>

Vadim Ovchinnikov · Answer 2 · 2017-07-07T18:06:08.970

First, I've moved your styles to classes. Don't use inline CSS.

flex CSS property is shorthand for setting flex: [flex-grow] [flex-shrink] [flex-basis].

You can set fixed percentage to your flex-basis values and zeros to flex-grow and flex-shrink to avoid flex items growing and shrinking.

Also you show move scroll CSS to your right nav block.

*,
*:before,
*:after {
  box-sizing: border-box;
}

.main-container {
  display: flex;
}

.left-nav {
  flex: 0 0 calc(100% / 3); /* One third width */
}

.right-nav {
  flex: 0 0 calc(200% / 3); /* Two third width */
  overflow-x: scroll;
}

.right-nav-container {
  display: flex;
}

.right-nav-item {
  min-width: 400px;
  height: 500px
}

.right-nav-item:nth-child(1) {
  background-color: blue;
}

.right-nav-item:nth-child(2) {
  background-color: red;
}

.right-nav-item:nth-child(3) {
  background-color: green;
}

<div>
  Top Header (should stay in view)
</div>
<div class="main-container">
  <div class="left-nav">
    LeftNav
  </div>
  <div class="right-nav">
    <div class="right-nav-container">
      <div class="right-nav-item">
      </div>
      <div class="right-nav-item">
      </div>
      <div class="right-nav-item">
      </div>
    </div>
  </div>
</div>

Nested Flexbox with horizontal overflow

2 Answers2