CSS 布局溢出滚动仅在 Div 中

发布于 2025-01-12 08:25:50 字数 1630 浏览 2 评论 0原文

我似乎无法让这个页面布局为我工作。我希望黄色 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>

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

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

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

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

就成功了

原文

I can't seem to get this page layout to work for me.
I want the yellow div to be scrollable, however not show past the red div.
Setting the page overflow to hidden disables scrolling altogether.

Edit: To clarify, I want the orange highlight to cover the full width in the overflow.

.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>

Another edit: A big factor for my struggle and confusion was that I'm using tailwind and tailwind applies this css rule on the base:

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

This had the effect that the yellow box was always too short..
Adding

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

did the trick

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

残花月 2025-01-19 08:25:50

容器没有定义的宽度或高度。因此，宽度和高度将被计算以适合内容。仅当容器的高度/宽度小于内容时才会发生溢出。

要解决您的问题，您只需将 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>

The container has not a defined width or height. as such the width and height will be calculated to fit-content. An overflow only can occure if the height/width of the container is smaller then the content.

To fix your issue you just need to add width: 100% to the container to fill out the parents width.

.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>

回复收藏 0 原文

~没有更多了~