内联块溢出容器外

Question

我有一个不想设置为 inline-block 且包含 inline-block 元素的容器。 这些元素将溢出容器而不是扩展它。 我怎样才能设法防止这种行为？

Demo

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

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

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

-编辑-

在我的真实页面上：

您可以看到背景（渐变浅灰色）停在窗口的右边框（在向右滚动之前）。 还有一个引导工具提示（黑色），位置错误且与上下文菜单相同。 容器、主体和 html 标记不会扩展到初始视图之外，因为 inline-block 元素会溢出到它们的容器之外。

我无法在 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>

本质上，这些方法实际上是使用display:inline-block 的indistinguishable 并且它是“缩小以适应”属性。行框和white-space:nowrap 以基本相同的方式保持背景颜色。

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