CSS 布局溢出仅在 Div 中滚动

Question

我似乎无法让这个页面布局为我工作。我希望黄色 div 可滚动，但不显示超过红色 div。将页面溢出设置为隐藏会完全禁用滚动。

编辑：为了澄清，我希望橙色突出显示覆盖溢出中的整个宽度。

.page {
  background-color: aqua;
  padding: 0 32px;
  height: 300px;
}

.layout {
  background-color: red;
  margin: 0 32px;
  padding: 16px 32px;
  height: 200px;
}

.container {
  background-color: yellow;
  margin: 0 -32px;
  padding: 16px 32px;
  
  white-space: nowrap;
  overflow: scroll;
  display: inline-block;
}

.highlight {
  background-color: orange;
  margin: 0 -32px;
  padding: 0 32px;
}

<div class="page">
  <div class="layout">
    <p>
      Some Text
    </p>
    <div class="container">
      <div class="row">Testline1</div>
      <div class="row">Testline1</div>
      <div class="row">Testline1</div>
      <div class="highlight">
        Overflow Overflow Overflow Overflow Overflow Overflow Overflow Overflow Overflow Overflow Overflow Overflow
        Overflow Overflow Overflow Overflow Overflow Overflow Overflow Overflow Overflow Overflow Overflow Overflow
      </div>
    </div>
  </div>
</div>

另一个编辑：我的挣扎和困惑的一个重要因素是我正在使用 tailwind，而 tailwind 在基础上应用了这个 css 规则：

*,
::before,
::after {
  box-sizing: border-box;
}

这导致黄色框总是太短.. 添加

.container {
  /* ... */
  box-sizing: content-box;
}

成功了

Answer 1

容器没有定义的宽度或高度。因此，宽度和高度将计算为 fit-content。仅当容器的 height/width 小于内容时才会发生溢出。

要解决您的问题，您只需将 width: 100% 添加到容器中以填充父级宽度。

.page {
  background-color: aqua;
  padding: 0 32px;
  height: 300px;
}

.layout {
  background-color: red;
  margin: 0 32px;
  padding: 16px 32px;
  height: 200px;
}

.container {
  background-color: yellow;
  margin: 0 -32px;
  padding: 16px 32px;
  
  white-space: nowrap;
  overflow: scroll;
  display: inline-block;
  width: 100%;
}

.highlight {
  background-color: orange;
  margin: 0 -32px;
  padding: 0 32px;
  width: fit-content;
}

<div class="page">
  <div class="layout">
    <p>
      Some Text
    </p>
    <div class="container">
      <div class="row">Testline1</div>
      <div class="row">Testline1</div>
      <div class="row">Testline1</div>
      <div class="highlight">
        Overflow Overflow Overflow Overflow Overflow Overflow Overflow Overflow Overflow Overflow Overflow Overflow
        Overflow Overflow Overflow Overflow Overflow Overflow Overflow Overflow Overflow Overflow Overflow Overflow
      </div>
    </div>
  </div>
</div>

CSS 布局溢出仅在 Div 中滚动

CSS Layout Overflow Scroll only in Div

html

css

overflow