html - 为什么会溢出:auto and overflow:scroll position the scrollbar differently?

Question

假设我想将几个框排成一行，但如果内容变得太高，我还想添加一个垂直滚动条。 (在此示例中，它始终是。)

下面的代码可以很好地完成这项工作:

.row {
  display: inline-block;
  border: 1px solid;
  background: #ffb3ae;
  max-height: 100px;
  overflow-y: scroll;
}
.cell {
  display: inline-block;
  height: 200px;
  margin: 8px 0;
  background: #ffec90;
}

<div class="row">
  <div class="cell">Lorem ipsum</div>
  <div class="cell">dolor sit amet</div>
  <div class="cell">consetetur</div>
  <div class="cell">sadipscing</div>
  <div class="cell">elitr</div>
</div>

不过，我更愿意将 overflow-y 设置为 auto。但是，这样做会以不同方式定位滚动条，显然会缩小 div。它还使最后一个框不再适合该行，导致该行分成两部分，这对我来说有点问题。 (见下文。)

.row {
  display: inline-block;
  border: 1px solid;
  background: #ffb3ae;
  max-height: 100px;
  overflow-y: auto; // this is all I changed
}
.cell {
  display: inline-block;
  height: 200px;
  margin: 8px 0;
  background: #ffec90;
}

<div class="row">
  <div class="cell">Lorem ipsum</div>
  <div class="cell">dolor sit amet</div>
  <div class="cell">consetetur</div>
  <div class="cell">sadipscing</div>
  <div class="cell">elitr</div>
</div>

• 这里到底发生了什么，为什么？这是在某处记录的预期行为，还是我只是搞砸了什么？
• 解决此问题的最简单方法是什么(当然，除了将 overflow 设置为 scroll 之外)？

Answer 1

我认为 white-space:nowrap 是 inline-block 的默认行为，其中 overflow:auto 打破了这个规则。您可以在 overflow:auto 之后再次添加 white-space:nowrap

.row {
  display: inline-block;
  border: 1px solid;
  background: #ffb3ae;
  max-height: 100px;
  overflow-y: auto;
white-space:nowrap;
}
.cell {
  display: inline-block;
  height: 200px;
  margin: 8px 0;
  background: #ffec90;
}

<div class="row">
  <div class="cell">Lorem ipsum</div>
  <div class="cell">dolor sit amet</div>
  <div class="cell">consetetur</div>
  <div class="cell">sadipscing</div>
  <div class="cell">elitr</div>
</div>