inline-block not working together with overflow-wrap for divs

Question

I have two divs that fit nicely on one line when using display: inline-block, but if one container now contains some very long word that I try to wrap with overflow-wrap and word-break, this container will move to the next line, what I want to avoid.

div {
  display: inline-block;
}

div.bar {
  overflow-wrap: break-word;
  word-break: break-all;
}

<div>foo</div>
<div class="bar">
  barbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbar
</div>

View on JSFiddle

What I would want is this

foobarbarbarbarbarbarbarbarbarbarbarbarbarbar...
...barbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbar

Answer 1

if you just want to have both the divs in the same line, consider wrapping them in a parent div with display:flex

Learn about flexbox model here

Check here:

div {
  display: inline-block;
}

div.bar {
  overflow-wrap: break-word;
  word-break: break-all;
}

div.flex-parent {
  display: flex;
}

<div class="flex-parent">
  <div>foo</div>
  <div class="bar">
    barbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbar
  </div>
</div>

JSFiddle