<figcaption>が、それはコンテンツの幅が<img>兄弟

Question

の幅を超えていたときに、コンテンツが長いURLであるとき、私は一般的に、それはコンテンツの幅が<img>兄弟の幅を超えていたときに<figcaption>要素がスクロールバーを描画するためにしようとしているスクロールバーをレンダリングしてくださいか、非常に長い言葉。私はこのanswerに基づく解決策を見つけた

* { 
 
    outline: 1px solid red; 
 
} 
 

 
figure { 
 
    display: table; 
 
    max-width: 100%; 
 
} 
 
    
 
figure img { 
 
    vertical-align: top; 
 
} 
 
    
 
figure figcaption { 
 
    display: table-caption; 
 
    caption-side: bottom; 
 
    overflow: auto; 
 
}

<figure> 
 
    <img src="//via.placeholder.com/220x100" alt=""> 
 
    <figcaption>Long word in figure caption Lopadotemachoselachogaleokranioleipsanodrimhypotrimmatosilphioparaomelitokatak</figcaption> 
 
</figure>

Answer 1

：

次のコードは、this answerから適合され、それはIE 11とエッジ15とではなく、61のFirefox 55とChrome動作します元の質問のコードスニペットに適用した：

* { 
 
    outline: 1px solid red; 
 
} 
 

 
figure { 
 
    display: inline-block; 
 
    position: relative; 
 
    margin: 0 auto; 
 
    max-width: 100%; 
 
} 
 

 
figure img { 
 
    height: auto; 
 
    max-width: 100%; 
 
    vertical-align: top; 
 
} 
 

 
figure figcaption { 
 
    left: 0; 
 
    overflow: auto; 
 
    position: absolute; 
 
    right: 0; 
 
}

<figure> 
 
    <img src="//via.placeholder.com/220x100" alt=""> 
 
    <figcaption>Long word in figure caption Lopadotemachoselachogaleokranioleipsanodrimhypotrimmatosilphioparaomelitokatak</figcaption> 
 
</figure>