具有垂直和水平滚动内容的灵活布局设计[副本]

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>