3

I'm trying to make the <figcaption> element render scrollbars when it's content's width exceeds the width of an <img> sibling, typically when the content is a long URL or a very long word.

The following code is adapted from this answer and it works with IE 11 and Edge 15 but not in Firefox 55 and 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>
  • What it looks like in IE 11 and Edge 15: https://i.stack.imgur.com/DPIUa.png –  Sep 28 '17 at 02:03

1 Answers1

0

I found a solution based on this answer which I applied to the code snippet in the original question:

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