Take a look at this code:
.gallery {
display: flex;
overflow-x: auto;
resize: both;
background-color: rgb(200, 200, 200);
padding: 10px;
height: 200px;
}
.item {
display: flex;
flex: 0 0 auto;
max-width: 100%;
}
.item img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.description {
margin-right: 30px;
margin-left: 5px;
writing-mode: vertical-rl;
transform: rotate(180deg);
text-align: center;
}<div class="gallery">
<div class="item">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1e/Wald018.jpg/256px-Wald018.jpg">
<div class="description">One</div>
</div>
<div class="item">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2d/Ung_norsk_furuskog_og_morgent%C3%A5ke.jpg/256px-Ung_norsk_furuskog_og_morgent%C3%A5ke.jpg">
<div class="description">Two</div>
</div>
<div class="item">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Swedish_Spruce_Forest.jpg/297px-Swedish_Spruce_Forest.jpg">
<div class="description">Three</div>
</div>
</div>If the container can fit the width of each item, all spaces between are consistent and appear as intended: https://i.stack.imgur.com/4QEGu.png
However, if the container is too small, you may encounter issues like this: https://i.stack.imgur.com/Ndl2H.png
In such cases, the margins of .description get disregarded. To prevent this, the spacing should be calculated as before, with .description maintaining its space and margin while the images adjust to the container size.
Is there a simple fix for this using flexbox settings without altering the entire structure already in place within a complex website layout?
Additional Note: After examining the responses, it appears that the solution does not work effectively for videos, leading to scenarios like these: https://i.stack.imgur.com/sQZgK.png https://i.stack.imgur.com/RaNtq.png
For instance, the video container might exceed the video dimensions. Any suggestions on resolving this issue?