子可滚动容器打破了父母的 div 宽度答案

【问题标题】：Child scrollable container breaks parent's div width子可滚动容器打破了父母的 div 宽度
【发布时间】：2017-03-13 20:30:36
【问题描述】：

我正在尝试编写以下标记。在左侧，我有固定宽度的容器。在右侧，我有一个 100% 宽度的灵活不可滚动容器。这个灵活的容器包含另一个 100% 宽度的容器，一旦它溢出 x 轴，它应该是可滚动的。在我的例子中，这个可滚动的子容器增加了父容器的宽度并使整个页面可滚动，即使子容器也是可滚动的。我需要在不破坏父 div 宽度的情况下仅制作可滚动的子容器。我已经简化了标记，所以基本上它看起来像这样：

HTML

<div class="container">
<div class="left">
Menu
</div>
<div class="right">
 <div class="header">
  <div>
   Some text here on the left
  </div>
  <div>
    <button>
    Some button
    </button>
  </div>
 </div>
 <div class="scrollable-container">
   <div class="item">1</div>
   <div class="item">2</div>
   <div class="item">3</div>
   <div class="item">4</div>
   <div class="item">5</div>
   <div class="item">6</div>
   <div class="item">7</div>
 </div>
</div>
</div>

CSS

.container {
  width: 100%;
  display: flex;
}

.left {
  width: 5em;
  border: 1px solid black;
}

.right {
  width: 100%;
  border: 1px solid black;
  display: flex;
  flex-direction: column;
}

.header {
  display: flex;
  justify-content: space-between;
}

.scrollable-container {
  overflow: scroll;
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.item {
  min-width: 3em;
  height: 2em;
  background-color: red;
  border: 1px solid green;
}

这里是 jsfiddle 链接只是为了玩。您可以更改结果框的宽度以查看问题。它工作正常，直到可滚动容器没有溢出

https://jsfiddle.net/tmr9jsbz/2/

【问题讨论】：

标签： html css

【解决方案1】：

使溢出auto

scrollable-container {
    overflow: auto;
....

【讨论】：

谢谢。它按预期工作。但我忘记了一件事。它不适用于根 .container 的填充。我已经更新了 jsfiddle 来展示这个案例 jsfiddle.net/tmr9jsbz/4
box-sizing:border-box 解决了这个问题。感谢你的回答！ :)

【解决方案2】：

将此添加到您的代码中：

.right {
    overflow: hidden;
}

JSFiddle

【讨论】：