インラインブロックを親の100％の高さにしますか？

Question

私は画像とテキストでラッパーdivを持っています。 word-wrap: break-wordのテキストは、複数の行が長くても常に画像の右側に始まります。現在、テキストは折り返して、画像の下の次の行を開始します。

div内のイメージをラップして、divの高さを100％に設定して列の並べ替えを作成しようとしましたが、動作していないようです。

私は何が起こっているのかを示すためにJSfiddleをした：http://jsfiddle.net/dsh0hnc9/2/

誰かが、それは、複数行の長さだ場合でも、私はテキストは常に画像の右側に開始するように得るのを助けることができますか？

Answer 1

#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>