我有一个容器，我不想将其设置为内联块并且包含内联块元素。 这些元素将溢出容器而不是扩展容器。 我怎样才能阻止这种行为？
Demo http://codepen.io/anon/pen/EKZaPY
#inline-block-container {
background-color: red;
white-space:nowrap;
}
.inline-block-element {
background-color: blue;
width: 50px;
height: 30px;
margin: 10px;
display:inline-block;
}
在这个演示中，我希望红色矩形能够扩展（甚至超出视口）以包含（视觉上）所有蓝色矩形。
-Edit-
On my real page :
您可以看到背景（渐变浅灰色）停在窗口的右边框处（在向右滚动之前）。 还有一个引导工具提示（黑色），其位置错误，并且与上下文菜单相同。 容器、正文和 html 标记不会扩展到初始视图之外，因为内联块元素溢出到其容器之外。
我无法在 css 中设置大小，因为元素（暗灰色）的内容可以更改。
我尝试将容器设置为 display:table ：相同的结果。 我尝试了position:absolute：它会阻止事情并且不能解决问题。 我尝试了 inline-flex ：相同的结果。
提前致谢。
此致，
绝对定位父 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>本质上，这些方法实际上是无法区分的 https://jsfiddle.net/sue8hyxL/1/从使用display:inline-block它具有“收缩以适应”的特性。线框和white-space:nowrap以基本相同的方式工作以保持背景颜色。
知道你为什么反对inline-block将有助于确定最合适的替代方案。