如何让 div 垂直滚动并显示渐变

Question

我试图让三个 div 水平并排。我希望最左边的 div 滚动，所以渐变会在用户滚动时显示出来。出于某种原因，div 不相邻，左边的也不滚动，我不知道为什么。

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

.overall {
  height: 100%;
}

.scroll {
  width: 10%;
  height: 200%;
  background: linear-gradient(#e66465, #9198e5);
  overflow-y: scroll;
}

.one {
  width: 70%;
  height: 100%;
  background: lightgreen;
}

.two {
  width: 20%;
  height: 100%;
  background: lightblue;
}

<div class="overall">
  <div class="scroll"></div>
  <div class="one"></div>
  <div class="two"></div>
</div>

Answer 1

它们没有水平放置，因为div是block-level个元素 default，意味着它们占据了整个 row / width 屏幕。

现在通常，如果需要水平放置它们，he/she 使用 Flexbox 或 display: flex 在 父元素 上设置。当然还有其他的方法。

对于滚动，它不会滚动，因为没有什么可以滚动 .在里面放一些"tall"足够内容（大于200%的集合height） .scroll div 并在 "action":

中查看

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

.overall {
  display: flex; /* displays flex-items (children) inline by default */
  height: 100%;
}

.scroll {
  /*width: 10%;*/
  flex: 1; /* flexbox way of defining width */
  height: 200%; /* necessary ? */
  background: linear-gradient(#e66465, #9198e5);
  overflow-y: auto; /* modified, only shows the scrollbar when needed */
}

.one {
  /*width: 70%;*/
  flex: 7;
  /*height: 100%; not necessary, takes the parents height */
  background: lightgreen;
}

.two {
  /*width: 20%;*/
  flex: 2;
  /*height: 100%;*/
  background: lightblue;
}

<div class="overall">
  <div class="scroll">
    <p style="height: 250%">Some looooong paragraph which is taller that its parent...just for demo...</p>
  </div>
  <div class="one"></div>
  <div class="two"></div>
</div>

如何让 div 垂直滚动并显示渐变

How to get a div to scroll vertically and reveal gradient

html

css

scroll

scrollbar

linear-gradients