CSS when inline-block elements line-break, parent wrapper does not fit new width

Question

How do you get an inline-block element to fit its content width, if the content line-breaks because of screen width?

<!-- parent inline-block --> <div style='display: inline-block;'>     <div style='display: inline-block; width:200px;'></div>     <!--         If this child line breaks,          two 200px wide blocks are stacked vertically.         That should make the parent width 200px,         but the parent stays much wider than that     -->     <div style='display: inline-block; width:200px;'></div> </div> 

I can't think of how to phrase the question so it sounds easy, but I put together a simple JSFiddle illustrating.

#wide {    position: relative;    width: 100%;    border: 1px solid black;    padding: 5px;  }  #narrow {    position: relative;    width: 175px;    border: 1px solid black;    padding: 5px;  }  .wrap {    display: inline-block;    border: 1px solid green;    margin: auto;  }  .inlineblock {    display: inline-block;    vertical-align: top;    background: red;    min-width: 100px;    min-height: 100px;    border: 1px solid black;  }

<section id='wide'>    <div class='wrap'>      <div class='inlineblock'></div>      <div class='inlineblock'></div>    </div>  </section>  <p>    When the red inline-blocks are forced to line break, how do you make a parent with display:inline-block (the green border) snap to fit? How do you get rid of all the extra horiztonal space in the lower green bordered div?  </p>  <section id='narrow'>    <div class='wrap'>      <div class='inlineblock'></div>      <div class='inlineblock'></div>    </div>  </section>

Answer 1

You can't. By default, inline-block elements have a shrink-to-fit width:

The shrink-to-fit width is:
min(max(preferred minimum width, available width), preferred width).

Then,

• When preferred minimum width <= preferred width <= available width, the width will be the preferred width, as you desire.
• When available width <= preferred minimum width <= preferred width, the width will be the preferred minimum width, as you desire.
• When preferred minimum width <= available width <= preferred width, the width will be the available width, even if you don't like it.

If you really don't want this, I guess you could add a resize event listener with JS, and set the desired width manually.