Setting "overflow: auto;" somehow magically fixes layout issues [duplicate] - html

Question

This question already has answers here:
Why is this inline-block element pushed downward?
(8 answers)
Align inline-block DIVs to top of container element
(5 answers)
Closed 2 years ago.
I have a bunch of divs that I laid out next to each other (depending upon window size there are 2-4 per "row"). Inside these divs, I added some wrappers and such, but at the center of each div there is an image that only has its width (not height) property set via CSS. The odd thing that was happening was that images with a greater width than height in the original png caused the outermost div containing it to shift down. I searched for a solution for a while and found that setting overflow: auto; in the divs with class "item-card-wrapper" (see below) somehow magically fixed the layout. I thought I understood how overflow works, but I am so confused as to how it seemed to magically fix the issue (and this isn't the only instance in which this has happened for me).
The only "correct" div here is the one that sticks out from the rest. When I added overflow: auto; it was fixed:
Here is the HTML (I clipped it early because it just starts repeating itself for each "square"):
<div id="shop">
<div id="shop-center-wrapper">
<div class="item-card-wrapper" style="width: 25%; min-width: 200px;">
<div class="item-card" style="height: 245px;">
<div class="image-wrapper">
<img class="image" src="static/products/Three Kings Glow.png">
</div>
</div>
</div>
<div class="item-card-wrapper" style="width: 25%; min-width: 200px;">
<div class="item-card" style="height: 245px;">
<div class="image-wrapper">
<img class="image" src="static/products/Amor Azul.png">
</div>
</div>
</div>
...
And here are the relevant CSS classes:
#shop {
margin-top: 40px;
margin-left: 50px;
margin-right: 50px;
overflow: auto;
}
#shop-center-wrapper {
text-align: center;
margin: 0px auto;
}
.item-card-wrapper {
margin-top: 20px;
margin-bottom: 20px;
display: inline-block;
overflow: auto;
}
.item-card {
width: 92%;
margin-left: 4%;
margin-right: 4%;;
background-color: white;
}
.image-wrapper {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.image {
width: 90%;
margin-left: 5%;
margin-right: 5%;
}
I really just want to understand how overflow: auto; was able to solve all of my problems.

Answer 1

The key property here should be inline-block in .item-card-wrapper. Using the inline-block display, the component will be aligned to the baseline, which same like vertical-align: baseline;.
Through my small experiment, you can see 3 images are attached on the baseline. You can remove the overflow: auto; in my snippet to create the same effect.
By adding overflow:auto, the item-card-wrapper's content should be clipped (if it is larger than its parent) to maintain the same height with the parent, therefore all item-card-wrapper component should be same height at last.
You might have question about, your picture have the same size, which shouldn't have this effect. I am guessing background-color: white; in .item-card is covered your actual picture size. Try change the color and see if my assumption is correct or not.
Ps. If you want to search for alternative from inline-block, flexbox with flex-direction might be an another good option.
#shop {
margin-top: 40px;
margin-left: 50px;
margin-right: 50px;
overflow: auto;
background: green; /* Edited */
padding: 10px; /* Edited */
}
#shop-center-wrapper {
text-align: center;
margin: 0px auto;
}
.item-card {
width: 92%;
margin-left: 4%;
margin-right: 4%;;
background-color: white;
}
.item-card-wrapper {
margin-top: 20px;
margin-bottom: 20px;
display: inline-block;
overflow: auto; /* Edited */
}
.image-wrapper {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: yellow; /* Edited */
}
.image {
width: 90%;
margin-left: 5%;
margin-right: 5%;
}
<div id="shop">
<div id="shop-center-wrapper">
<div class="item-card-wrapper" style="width: 25%; min-width: 200px;">
<div class="item-card" style="height: 245px;">
<div class="image-wrapper">
<img class="image" src="https://www.designhill.com/design-blog/wp-content/uploads/2015/02/McDonald-Logo-1.jpg">
</div>
</div>
</div>
<div class="item-card-wrapper" style="width: 25%; min-width: 200px;">
<div class="item-card" style="height: 245px;">
<div class="image-wrapper">
<img class="image" src="https://d1.awsstatic.com/case-studies/600x400_mcdonalds_logo.58256463615a3353933179883a8c58f593a00880.png">
</div>
</div>
</div>
<div class="item-card-wrapper" style="width: 25%; min-width: 200px;">
<div class="item-card" style="height: 245px;">
<div class="image-wrapper">
<img class="image" src="https://media-exp1.licdn.com/dms/image/C4E0BAQHWxquJ9PJxvw/company-logo_200_200/0?e=2159024400&v=beta&t=95WVdd_Q6vNKUybW3mX2odTGxRJ30bwKjF9SkeSH96w">
</div>
</div>
</div>
</div>
</div>