内联块溢出到外部容器 [英] inline-block overflowing outside container

问题描述

我有一个我不想设置为inline-block的容器，并且其中包含inline-block元素. 这些元素将从容器溢出而不是扩展容器. 我如何设法防止这种行为?

I have a container that I don't want to set as inline-block and that contains inline-block elements. These elements will overflow out of the container instead of extending it. How can I manage to prevent this behaviour ?

演示

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

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

在此演示中，我希望红色矩形展开(甚至超出视口)以包含(视觉上)所有蓝色矩形.

In this demo, I would like the red rectangle to expand (even out of viewport) to contain (visually) all the blue rectangles.

-编辑-

在我的真实页面上:

On my real page :

您可以看到背景(渐变浅灰色)停在窗口的右边界(向右滚动之前). 还有一个错误放置的引导工具提示(黑色)，与上下文菜单相同. 容器，主体和html标签不会在初始视图之外扩展，因为内联块元素会在其容器外溢出.

You can see the background (gradient light gray) stopping at the right border of the window (before scrolling to the right). There is also a bootstrap tooltip (in black) that is wrongly positionned and same for a context menu. The container, the body and the html tag won't extand outside of the initial view because the inline-block elements overflow outside of their container.

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

I can't set the size in css because the content of the elements (dimgray) can change.

我试图将容器设置为display:table:相同的结果. 我尝试了position:absolute:它制动了一切，但没有解决问题. 我尝试了inline-flex:结果相同.

I tried to set the container as display:table : same result. I tried position:absolute : it brakes things and doesn't solve the issue. I tried inline-flex : same result.

谢谢.

最诚挚的问候，

推荐答案

将父div完全定位将启用此功能，但这可能不适合您的要求.

Positioning the parent div absolutely will enable this but this may not be suitable for your requirements.

#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

Or as mentioned by 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

Or as also mentioned by 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>

本质上，这些方法实际上是 无法区分 这是缩小以适应"的属性.线框和white-space:nowrap的工作方式基本上相同，以保持背景色.

Essentially, these methods are virtually indistinguishable from using display:inline-block and it's "shrink to fit" properties. The line boxes and white-space:nowrap work in basically the same way to maintain the background color.

知道为什么您不喜欢inline-block将会大大帮助您找到最合适的选择.

Knowing why you are averse to inline-block would go a long way to identifying the most suitable alternative.

这篇关于内联块溢出到外部容器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！