After exploring numerous questions and answers, it seems that most discussions on flexbox aspect ratio involve using <div> elements instead of <ul><li>. However, I am struggling to find a solution to my specific issue. When utilizing <div> tags, the images do not remain on the same line and instead drop down the screen, which is not my desired outcome.
I aim to have a row of 4 images that stay in a row regardless of screen size, without causing horizontal scrolling, so I have turned to flexbox for assistance.
Despite various attempts, when displayed on smaller screens, the images' width adjusts correctly but their height remains unchanged, resulting in distortion.
I have experimented with flex-shrink: 1; on all items, as well as employing min-height: 0;, min-height: 1px;, and align-items: stretch;, yet none of these adjustments seem to resolve the height issue alongside width reduction.
Here is an excerpt from my HTML code:
.flexbox-holder{
padding: 0;
margin: auto;
list-style: none;
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
min-height: 1px;
}
.flexbox-item{
overflow: hidden;
flex-basis: 100%;
max-width: 240px;
min-width: 1px;
height: 100%;
max-height: 150px;
min-height: 1px;
}<ul class="flexbox-holder">
<li class="flexbox-item"><img src="images/service1.jpg" alt="service1"></li>
<li class="flexbox-item"><img src="images/service2.jpg" alt="service1"></li>
<li class="flexbox-item"><img src="images/service3.jpg" alt="service1"></li>
<li class="flexbox-item"><img src="images/service4.jpg" alt="service1"></li>
</ul>