3

I have a flexbox layout with fixed header, fixed footer, fixed menu, and scrolling content.

Thanks to some articles and SO answers, I have managed to make the menu and content vertically-scrolling, as expected.

Now, I just can't find how to do the same to make the content horizontally scroll. The horizontal scrollbar always appears at the body level. I've tried forcing a width on each container but it doesn't work. I expected the overflow: auto on the .layout-content-content div to overflow both horizontally and vertically, but CSS is not to be tamed so easily, apparently.

Corresponding codepen: https://codepen.io/cosmo0/pen/vaZbGL

html,
body,
.layout-container {
  height: 100%;
  width: 100%;
}
body {
  margin: 0;
}
.layout-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}
.header,
.footer {
  height: 50px;
  flex: 0 0 auto;
}
.layout-body {
  flex: 1 1 auto;
  display: flex;
}
.layout-menu {
  flex: 0 0 auto;
  width: 300px;
  overflow: auto;
}
.layout-content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.layout-content-title {
  flex: 0 0 auto;
  height: 50px;
}
.layout-content-content {
  flex: 1 1 auto;
  overflow: auto;
}

/* this is to simulate some large data table */
.large {
  width: 10000px;
  border: 1px solid #ccc;
}
<div class="layout-container">
  <div class="header">Header</div>
  <div class="layout-body">
    <div class="layout-menu">
      <ul>
        <li>Menu contents</li>
      </ul>
    </div>
    <div class="layout-content">
      <div class="layout-content-title">Page title</div>
      <div class="layout-content-content">
        <div class="large">This content is too large</div>
        <p>Content content.</p>
      </div>
    </div>
  </div>
  <div class="footer">Footer  </div>
</div>
thomasb
  • 5,816
  • 10
  • 57
  • 92

1 Answers1

2

Simply put 

overflow: auto;

onto .layout-content

nsane
  • 116
  • 5
  • I tried that, it didn't work on my actual layout (it hides the horizontal scrollbar), but it works on Codepen. There must be something else on my layout. Thanks! – thomasb Jul 30 '18 at 14:36
  • you can add `overflow: auto !important;` to force override of any other class that migth interfere with your overflow. – nsane Jul 30 '18 at 14:45
  • It was the content that had an `overflow:hidden`... a YUI data grid... in 2018... YUI is INSANELY bad... – thomasb Jul 30 '18 at 15:54