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.
-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,