当 <figcaption> 内容的宽度超过 <img> 兄弟的宽度时，使滚动条呈现答案

【问题标题】：Make <figcaption> render scrollbars when it's content's width exceeds the width of an <img> sibling当 <figcaption> 内容的宽度超过 <img> 兄弟的宽度时，使滚动条呈现
【发布时间】：2017-10-02 18:17:43
【问题描述】：

我试图让 <figcaption> 元素的内容宽度超过 <img> 同级元素的宽度时呈现滚动条，通常是当内容是长 URL 或非常长的单词时。

以下代码改编自this answer，适用于 IE 11 和 Edge 15，但不适用于 Firefox 55 和 Chrome 61：

* {
  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>

【问题讨论】：

在 IE 11 和 Edge 15 中的样子：i.stack.imgur.com/DPIUa.png

标签： css html image

【解决方案1】：

我找到了一个基于 answer 的解决方案，我将其应用于原始问题中的代码 sn-p：

* {
  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>

【讨论】：