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



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



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



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

    Apparently the only current solution requires JavaScript... :wtf:

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


  • Winner of the 2016 Presidential Election

    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.



  • unwated space


Log in to reply
 

Looks like your connection to What the Daily WTF? was lost, please wait while we try to reconnect.