How to build a figure with a fixed height and an img and figcaption that flex to fill the space-CodePudding

Situation: I want a figure that has an img and a figcaption stacked vertically. The figure should be 100vh high, the figcaption its natural height (i.e. it could split onto two lines, or the user could change the text size), and the img should flex to take the remaining space.

I’ve got a solution that works if the image is initially smaller than the viewport: https://codepen.io/robinwhittleton/pen/XWYaqyg. But if you edit that pen to an image size of 2000x3000 (i.e. bigger than the viewport) it breaks.

Sample HTML:

<figure>
    <img src="https://via.placeholder.com/200x300/eee?text=2:3"/>
    <figcaption>Figcaption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption</figcaption>
</figure>

Sample CSS:

figure {
    margin: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
}

img {
    object-fit: contain;
    flex-shrink: 1;
}

I’ve tried a bunch of stuff now but either I’m fundamentally misunderstanding this, or it’s not really possible to do (which seems unlikely). Any ideas? This is going into an ePub so the ideal solution will work on slightly older WebKits, but at this point I’d just be happy with a solution that’s working in browsers.

CodePudding user response：

The image will be scaled down.

figure {
    margin: 0;
    display: grid;
    flex-direction: column;
    height: 100vh;
    grid-auto-rows: 1fr auto;
}

img {
    height: 100%;
}


body { margin: 0}

<figure>
    <img src="https://via.placeholder.com/200x300/eee?text=2:3"/>
    <figcaption>Figcaption caption caption caption caption caption</figcaption>
</figure>

CodePudding user response：

You can try this tricky with height: calc(100% - 1000px); function. Where 1000px you can yourself change and this value must initially be greater than the possible height of the text box. And using flex-grow: 1; to fill the image.

figure {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

img {
  height: calc(100% - 1000px);
  object-fit: contain;
  flex-grow: 1;
}

/* reset styles */
*,
::after,
::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

<figure>
  <img src="https://via.placeholder.com/2000x3000/eee?text=2:3" />
  <figcaption>
    Figcaption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption
    caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption
  </figcaption>
</figure>