2

I'm trying to make the central panel a scrollable area (x and y) within a nested flexbox item.

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  color: #fff;
}

.layout {
  display: flex;
  align-items: stretch;
  flex-wrap: nowrap;
  width: 100%;
}

.layout.horizontal {
  flex-direction: row;
}

.layout.vertical {
  flex-direction: column;
}

.pane {
  position: relative;
  flex: 1;
}

.fill {
  min-height: 100%;
  height: 100%;
}

.scrollable {
  overflow-x: auto;
  overflow-y: auto;
}

.content {
  background-color: salmon;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 200px;
}


/* Colour Highlighting */

.layer1 > .pane:nth-child(1) {
  background-color: steelblue;
}

.layer1 > .pane:nth-child(2) {
  background-color: plum;
}

.layer1 > .pane:nth-child(3) {
  background-color: lightsteelblue;
}

.layer2 > .pane:nth-child(1) {
  background-color: darkseagreen;
}

.layer2 > .pane:nth-child(2) {
  background-color: seagreen;
}

.layer2 > .pane:nth-child(3) {
  background-color: lightseagreen;
}
<div class="layout horizontal fill layer1">
  <div class="pane">
    LEFT
  </div>
  <div class="pane">
    <div class="layout vertical fill layer2">
      <div class="pane">
        TOP
      </div>
      <div class="pane scrollable">
        <div class="content">CONTENT</div>
      </div>
      <div class="pane">
        BOTTOM
      </div>
    </div>
  </div>
  <div class="pane">
    RIGHT
  </div>
</div>

Note: Expand the sample to full window mode.

In non-nested scenarios the horizontal scrolling works fine for the central panel:

Horizontal Flexbox Example

Vertical Flexbox Example

However when nested, the horizontal scrolling for the central panel does not activate as expected. This seems to be the case for Chrome, Firefox and Edge. Funnily enough it works as expected in IE11, which suggests the modern browsers are correctly interpreting some specification unknown to me.

What am I missing?

Update: It seems setting overflow:auto on the outer central column is required. With this it behaves as expected. Why is this?

Brett Postin
  • 11,215
  • 10
  • 60
  • 95
  • 2
    So what do you expect? .... As I see it, it works as intended. – Asons Apr 07 '17 at 10:15
  • 2
    I'm expecting the central panel to collapse and scroll horizontally the same way it does vertically when the viewable area is smaller than the red content box. The same way it does in non-nested examples. – Brett Postin Apr 07 '17 at 10:20
  • You are correct: It is behavior defined in the spec. By default, a flex item cannot be smaller than its content. – Michael Benjamin Apr 07 '17 at 13:47
  • 1
    The outer central column (`.pane:nth-child(2)`) is a flex item in a row-direction container. Horizontal scroll will not work because the item is not permitted to overflow. It has `min-width: auto` by default. – Michael Benjamin Apr 07 '17 at 13:48
  • 2
    To override this setting use `min-width: 0` or `overflow` with any value other than `visible`. – Michael Benjamin Apr 07 '17 at 13:48
  • Thanks @Michael_B your answer in the duplicate question answers this perfectly. Although why do the non-nested examples work? – Brett Postin Apr 10 '17 at 10:18

1 Answers1

-2

Don't know if I know what you want, but did you try to put a @media in css and then put overflow-x:scroll?

Bruno Moutinho
  • 26
  • 1
  • 8