内联块溢出容器外

Question

我有一个容器，我不想将其设置为内联块，但它包含内联块元素。这些元素将溢出容器而不是扩展它。我怎样才能设法防止这种行为？

#inline-block-container {
background-color: red;
white-space:nowrap;
}

.inline-block-element {
background-color: blue;
width: 50px;
height: 30px;
margin: 10px;
display:inline-block;
}

在此演示中，我希望红色矩形扩展（甚至超出视口）以包含（视觉上）所有蓝色矩形。

-编辑-

在我的真实页面上：

您可以看到背景（渐变浅灰色）停在 window 的右边界（在向右滚动之前）。还有一个 bootstrap 工具提示（黑色）位置错误，与上下文菜单相同。容器、正文和 html 标记不会扩展到初始视图之外，因为内联块元素溢出到它们的容器之外。

我无法在 css 中设置大小，因为元素的内容 (dimgray) 可以更改。

我尝试将容器设置为 display:table：相同的结果。我试过 position:absolute ：它刹车了，并没有解决问题。我尝试了 inline-flex ：相同的结果。

提前致谢。

此致，

Answer 1

定位父级 div 绝对可以启用此功能，但这可能不适合您的要求。

#inline-block-container {
  background-color: red;
  white-space: nowrap;
  position: absolute;
  width: auto;
}

#inline-block-container {
  background-color: red;
  white-space: nowrap;
  position: absolute;
  width: auto;
}
.inline-block-element {
  background-color: blue;
  width: 50px;
  height: 30px;
  margin: 10px;
  display: inline-block;
}

<div id="inline-block-container">
  <div class="inline-block-element"></div>
  <div class="inline-block-element"></div>
  <div class="inline-block-element"></div>
  <div class="inline-block-element"></div>
  <div class="inline-block-element"></div>
  <div class="inline-block-element"></div>
  <div class="inline-block-element"></div>
  <div class="inline-block-element"></div>
  <div class="inline-block-element"></div>
  <div class="inline-block-element"></div>
  <div class="inline-block-element"></div>
  <div class="inline-block-element"></div>
  <div class="inline-block-element"></div>
  <div class="inline-block-element"></div>
  <div class="inline-block-element"></div>
  <div class="inline-block-element"></div>
  <div class="inline-block-element"></div>
  <div class="inline-block-element"></div>
  <div class="inline-block-element"></div>
  <div class="inline-block-element"></div>
</div>

或者如 Nenad Vracar 所述...display:table

#inline-block-container {
  background-color: red;
  white-space: nowrap;
  display: table;
  width: auto;
}

#inline-block-container {
  background-color: red;
  white-space: nowrap;
  display: table;
  width: auto;
}
.inline-block-element {
  background-color: blue;
  width: 50px;
  height: 30px;
  margin: 10px;
  display: inline-block;
}

<div id="inline-block-container">
  <div class="inline-block-element"></div>
  <div class="inline-block-element"></div>
  <div class="inline-block-element"></div>
  <div class="inline-block-element"></div>
  <div class="inline-block-element"></div>
  <div class="inline-block-element"></div>
  <div class="inline-block-element"></div>
  <div class="inline-block-element"></div>
  <div class="inline-block-element"></div>
  <div class="inline-block-element"></div>
  <div class="inline-block-element"></div>
  <div class="inline-block-element"></div>
  <div class="inline-block-element"></div>
  <div class="inline-block-element"></div>
  <div class="inline-block-element"></div>
  <div class="inline-block-element"></div>
  <div class="inline-block-element"></div>
  <div class="inline-block-element"></div>
  <div class="inline-block-element"></div>
  <div class="inline-block-element"></div>
</div>

或者正如 Nenad Vracar 所提到的...display:inline-flex

#inline-block-container {
  background-color: red;
  white-space: nowrap;
  display: inline-flex;
  width: auto;
}

#inline-block-container {
  background-color: red;
  white-space: nowrap;
  display: inline-flex;
  width: auto;
}
.inline-block-element {
  background-color: blue;
  width: 50px;
  height: 30px;
  margin: 10px;
  display: inline-block;
}

<div id="inline-block-container">
  <div class="inline-block-element"></div>
  <div class="inline-block-element"></div>
  <div class="inline-block-element"></div>
  <div class="inline-block-element"></div>
  <div class="inline-block-element"></div>
  <div class="inline-block-element"></div>
  <div class="inline-block-element"></div>
  <div class="inline-block-element"></div>
  <div class="inline-block-element"></div>
  <div class="inline-block-element"></div>
  <div class="inline-block-element"></div>
  <div class="inline-block-element"></div>
  <div class="inline-block-element"></div>
  <div class="inline-block-element"></div>
  <div class="inline-block-element"></div>
  <div class="inline-block-element"></div>
  <div class="inline-block-element"></div>
  <div class="inline-block-element"></div>
  <div class="inline-block-element"></div>
  <div class="inline-block-element"></div>
</div>

本质上，这些方法实际上是 indistinguishable 来自使用 display:inline-block 和它的 "shrink to fit" 属性。 line boxes 和 white-space:nowrap 以基本相同的方式工作以保持背景颜色。

了解您为什么反对 inline-block 将有助于确定最合适的替代方案。

内联块溢出容器外

inline-block overflowing outside container

css

containers