带滚动和左/右区域的DIV布局

Question

我想实现以下布局：

滚动很简单，它只是一个嵌套的DIV。我也知道如何添加左侧40px区域。问题是：如何添加正确的40px区域？请注意，两个40px区域都在滚动空间之外。

有什么想法吗？

Answer 1

您可以使用 Flexbox ：

执行此操作

* {margin:0;padding:0;box-sizing:border-box}
html, body {width:100%}

.parent {
  display: flex; /* displays the children inline */
}

.parent > .child {
  height: 100px;
}

.parent > .child:nth-child(2) {
  flex: 1; /* stretches to fill the remaining space */
  overflow-x: scroll;
}

.parent > .child:nth-child(2) > div {
  width: 2000px;
}

.parent > .child:first-child,
.parent > .child:nth-child(3) {
  width: 40px;
  background: Lavender;
}

<div class="parent">
  <div class="child"></div>
  <div class="child">
    <div>...WIDE DIV INSIDE THE SECOND CHILD...</div>
  </div>
  <div class="child"></div>
</div>