inline-block overflowing outside container

Question

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,

Answer 1

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.