[semi-solved] CSS and unwated space from line wrapping

LB_

I tried to search this on my own but I don't even know how to describe what is happening vs what I want.

I have this fiddle that I am struggling to fix:

<div class="outer">
	<div class="inner">
		<p>Blah blah blah</p>
	</div><!--
	--><div class="inner">
		<p>Blah blah blah</p>
	</div>
</div>

body
{
	border: 5px solid blue;
}
.outer
{
	display: inline-block;
	border: 5px solid red;
}
.inner
{
	display: inline-block;
	width: 20em;
	border: 5px solid black;
}

With a wide viewport, this happens, which is perfectly fine and what I want to happen:

The red border and black borders always touch, with no space between.

But, with a smaller viewport, something terrible happens:

Suddenly, the red border tries to consume all available space - this is bad, I want it to stay touching the black borders at all times. It is fine that the black boxes wrap to the next line, that's intended, but the red border shouldn't extend beyond the space the black boxes are actually using.

Unfortunately I don't even know what this is or why it is happening, so I don't even know what to search for. Help?

I can't use media queries because this red box has to be in multiple places with varying amounts of space
I can't use the float property because sometimes I want the black boxes and/or red boxes to be centered (in this case with text-align: center;)

EDIT: If you try making the black boxes display: block; it doesn't work with a wide viewport even though it does with a small viewport.

ben_lubar

Is there some way in CSS to say "if my width is less than 40em, set my width to 20em"? What's happening is that the inline-block elements are wrapping and a wrapped line fills the entire width.

LB_

After much reorganizing of words I finally found what I am talking about:

Inline-block line-wrap extra space

I've got an inline-block element that contains a very long word. When I resize the viewport until I reach the breakpoint of the text wrapping to the next line, I get a substantial amount of space.

Apparently the only current solution requires JavaScript...

EDIT: @ben_lubar I wish! Those are called element queries and they don't exist yet.

asdf

I tried playing around with flexbox:

.outer
{
	display: inline-flex;
	flex-flow: row wrap;
	border: 5px solid red;
}
.inner
{
	width: 20em;
	border: 5px solid black;
}

But that doesn't seem to help either. As soon as the flexbox becomes multi-line, it expands to fill all the available width.

hungrier

unwated space