I have three figures, each with different sizes and different figcaptions.
I want them to display inline (so if the last figure doesn't fit in the line, it'll move the next line).
Here's what I have so far: https://jsfiddle.net/Jonjei/31kteL68/6/ (The preview corner isn't as accurate to what I see in a normal window)
Images are random placeholders and do not belong to me.
The problem: The figcaptions take up all the space and are pushing the next figure to the next line.
Solutions I'm looking for:
Make each figcaption text stop at the edge of its figure and move to a new line within the figcaption.
Have the figure (with its figcaption) move to the next line if it's too large to fit in the first.
Any other general suggestions and tips are more than welcome. I managed to make the text work with a single-row table, but that doesn't help when I want the last figure to move to the next line.
.container {
border: 5px transparent solid;
border-radius: 2px;
margin: 2% 10% 2% 10%;
padding: 0px 7% 0px 7%;
}
.fig-container{
display:flex;
width:100vw;
}
figure{
flex-grow:1;
display:block;
text-align:left;
background:#e3e3e3;
}<!-- images are placeholders and belong to their respective owners -->
<div class="container" align="center">
<h1 style="font-size: 1.5rem">OTHER NOTES</h1>
<div class="fig-container">
<figure><img src="https://is3-ssl.mzstatic.com/image/thumb/Purple5/v4/da/83/ae/da83ae00-d126-1200-1588-c74c59aa1a38/source/256x256bb.jpg" alt=""><figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</figcaption></figure>
<figure><img src="https://www.petmd.com/sites/default/files/petmd-puppy-weight.jpg" alt=""><figcaption>Duis ut nulla sed dolor ultrices ornare sed pharetra ligula. Phasellus sapien augue, eleifend ut odio vel, suscipit auctor purus.</figcaption></figure>
<figure><img src="https://vetstreet-brightspot.s3.amazonaws.com/56/d831705c9f11e19be6005056ad4734/file/puppy_training-tips-335mk022012-200454626-001.jpg" alt=""><figcaption>Proin volutpat dictum leo eget pharetra. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</figcaption></figure>
</div>