html - 带滚动和左/右区域的 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>