Vertical writing-mode figcaption refuses to shrink past certain point
Got a banner component with a vertical figcaption (thanks designers). It's normally part of a bigger component, but I simplified it for the issue display (so excuse any seemingly unneccessary extra tags and classes). The figcaption should always take up a % of the parent's height (=the image height). I can't hardcode any sizes, as all content comes from a cms and is only known at runtime. Things work, but the figcaption refuses to shrink past a certain, seemingly random point.
To check issue: run the codesanbox, open preview, shrink preview window.
https://codesandbox.io/p/devbox/3z3qjm
4 Replies
Excalidraw
Excalidraw — Collaborative whiteboarding made easy
Excalidraw is a virtual collaborative whiteboard tool that lets you easily sketch diagrams that have a hand-drawn feel to them.
The first picture shows how it should work at all times and screen sizes - the caption always taking up a fixed percentage of the image height with text clipped by ellipses. Second shows what happens when shrinking past a certain seemingly random point. The others are how that should work.
Think this should do it for you
https://codepen.io/MarkBoots/pen/eYqgPxZ?editors=1100
(screenshot because the pen might get deleted later)
Nice, that works very well. Thank you so much.