内联块溢出容器外

2022-01-24 00:00:00 containers css

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

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

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

我尝试将容器设置为 display:table :结果相同.我试过 position:absolute :它会刹车并且不能解决问题.我试过 inline-flex :同样的结果.

提前致谢.

最好的问候，

解决方案

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

#inline-block-container {背景颜色:红色；空白:nowrap；位置:绝对；宽度:自动；}

#inline-block-container {背景颜色:红色；空白:nowrap；位置:绝对；宽度:自动；}.inline-block-element {背景颜色:蓝色；宽度:50px；高度:30px；边距:10px；显示:内联块；}

<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 {背景颜色:红色；空白:nowrap；显示:表格；宽度:自动；}

#inline-block-container {背景颜色:红色；空白:nowrap；显示:表格；宽度:自动；}.inline-block-element {背景颜色:蓝色；宽度:50px；高度:30px；边距:10px；显示:内联块；}

<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 {背景颜色:红色；空白:nowrap；显示:inline-flex；宽度:自动；}

#inline-block-container {背景颜色:红色；空白:nowrap；显示:inline-flex；宽度:自动；}.inline-block-element {背景颜色:蓝色；宽度:50px；高度:30px；边距:10px；显示:内联块；}

<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 并且它是缩小以适应"属性.行框和 white-space:nowrap 以基本相同的方式保持背景颜色.

了解您为什么不喜欢 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 ?

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;
}

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

-Edit-

On my real page :

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.

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

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.

Thanks in advance.

Best regards,

解决方案

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>

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>

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>

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.

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

相关文章