Bender Bender - 2 months ago 5x
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:

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


#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=''>
    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.