Bender Bender - 3 months ago 9
HTML Question

Make inline-block 100% height of parent?

I have a wrapper div with an image and some text. I want the text which has

word-wrap: break-word
to always start to the right of the image, even when it's multiple lines long. Right now the text wraps around and starts the next line underneath the image.

I tried wrapping the image inside a div and setting the div's height to 100% to create a sort of column but that doesn't seem to be working.

I made a JSfiddle to show what's going on: http://jsfiddle.net/dsh0hnc9/2/

Can someone help me get the text to always start to the right of the image, even if it's multiple lines long?

Answer

#outerDiv {
  border: 1px solid red;
  display: flex;
  align-items: center;
  padding: 10px;
}
#imgDiv {
  height: 100%;
  margin-right: 10px;
}
p {
  color: black;
  display: inline-block;
  word-wrap: break-word;
  margin: 0;
}
<div id="outerDiv">
  <div id="imgDiv">
    <img src='http://beerhold.it/10/10'>
  </div>
  <p>
    me: Yea there's kids who use this, don't say super inappropriate stuff please or you'll be banned. I saw a guy get banned last week. boy was he pissed.
  </p>
</div>