Display: Inline-Block Does Not Make Width as Small as Possible with Wrapped Contents

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

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.

Inline-block div not shrinking to content

This is an interesting problem.

Consider the following simplified example.

I have an inline-block element .textbox with a max-width of 300px,
designed to force the text to wrap.

In the first line, I added a white-space: nowrap to keep the text on a single line and to force it to overflow out of the element.

If you run the snippet below, you should see that the right edge of the second box coincides with the word "onto", so the text flow algorithm in the browser will force the text, starting with "onto" to flow into the second line, as expected.

Now, as you noted, there is white space left over to the right of the preceding word ("wraaaa....ap"). This space corresponds to the length of the word "onto" up to the max-width of the containing element.

Browsers do not compute the amount of white space left by the string/word that is about to flow onto the second line, therefore, it leaves the width of the .textbox to the value defined by max-width.

So, this demonstrates how the extra space originates. However, there is no way using CSS of forcing the browser to "backspace" and eliminate the hanging white space to the right.

With a lot more effort, you might be able to come up with a JavaScript/jQuery fix, but that would be a different exercise, which perhaps some other member of the community may pursue to further the answer along.

I should also note the the same problem arises in Firefox.

Furthermore, the same effect manifests itself if you try display table-cell and table and inline-table.

.textbox {
  outline: 1px dotted gray;
  display: inline-block;
  max-width: 300px;
  margin: 2px 0; /* for demo only */
}
.textbox.fix {
  white-space: nowrap;
}

<div class="textbox fix">Some words that can wrDisplay: Inline-Block Does Not Make Width as Small as Possible with Wrapped ContentsDisplay: Inline-Block Does Not Make Width as Small as Possible with Wrapped Contentsp onto a second line as needed.</div>
<br>
<div class="textbox">Some words that can wrDisplay: Inline-Block Does Not Make Width as Small as Possible with Wrapped ContentsDisplay: Inline-Block Does Not Make Width as Small as Possible with Wrapped Contentsp onto a second line as needed.</div>

Two inline-block, width 50% elements wrap to second line

It is because display:inline-block takes into account white-space in the html. If you remove the white-space between the div's it works as expected. Live Example: http://jsfiddle.net/XCDsu/4/

<div id="col1">content</div><div id="col2">content</div>

Allow inline-block elements to wrap before stacking

Use display: table-cell; Instead of display:inline-block will solve your issue.

.title {     display: table-cell;     vertical-align: top;}.box {    display: table-cell;     vertical-align: top;}

<div class="title">    <h1>Hi</h1>    <h2>Lots of text I want to wrap</h2></div><div class="box">    Should stay in a block</div>

Why display inline-block breaks overflow-wrap: break-word

For inline-block, you should define width so CSS knows where to break the word.

a {
  font-size: 0.875rem;
  color: #006fdd;
}

.inline-block {
  display: inline-block;
  width: 100px; /* define width here */
}
.container {
   max-width: 100px;
   overflow-wrap: break-word;
   background-color: yellow;
   padding: 10px;
   margin-bottom: 20px;
}

<div class="container">
  <a class="inline-block">display: inline-block longlonglonglonglonglonglonglonglonglonglonglonglonglongtext@something</a>
</div>

<div class="container">
  <a>display: inline longlonglonglonglonglonglonglonglonglonglonglonglonglongtext@something</a>
</div>

<div class="container">
  <div>longlonglonglonglonglonglonglonglonglonglonglonglonglongtext@something</div>
</div>

Fit div width to inline-block children (unknown number of divs per row)

Since there doesn't seem to be a CSS-only method, here's some quick JavaScript to get the job done.

1. Temporarily change the parent's display style to inline, so that it will shrink-to-fit its content.
2. Set the parent's width to its shrunk-to-fit width using getBoundingClientRect().
3. Restore the parent's default display style by clearing it.

Snippet

var a = document.getElementById('a');a.style.display = 'inline';a.style.width = a.getBoundingClientRect().width + 'px';a.style.display = '';

#a {  background-color: gray;}.b {  width: 110px;  height: 110px;  display: inline-block;  background-color: blue;}

<div id="a">  <div class="b"></div>  <div class="b"></div>  <div class="b"></div>  <div class="b"></div>  <div class="b"></div>  <div class="b"></div>  <div class="b"></div>  <div class="b"></div>  <div class="b"></div></div>

---

Related Topics