Setting "overflow: auto;" somehow magically fixes layout issues

Question

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.

another way to fix this is to add vertical-align:top instead of overflow — Temani Afif, May 27 '20 at 08:43

Caleb Chong · Accepted Answer · 2020-05-27T09:13:32.383

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>

*By adding overflow:auto, the item-card-wrapper should be clipped to maintain the same height with other, therefore the image should be same height at last.* --> this is not true, adding overflow will simply change the baseline of the elements and will not affect the height — Temani Afif, May 27 '20 at 08:43
@TemaniAfif yea correct, it is not item-card-wrapper to be clipped. However, the content will be clipped if the content is bigger than its parent. I have updated that part. Thanks. — Caleb Chong, May 27 '20 at 09:17

Setting "overflow: auto;" somehow magically fixes layout issues

1 Answers1