Setting height of img parent breaks flex align-items and text-align

Question

I have an auctions app where the listings are displayed with an image and the text description on the right. I want the .img to be max-height and max-width of 90%. Max-width works, but in order to get max-height to work, I have to set the height of the .img's containing block (.a_img). Once I do that, the align-items: center; and text-align: center; declarations of .image no longer work. What is going on and how can I get around this? Thank you.

.listings {
    display: flex;
    margin-bottom: 1rem;
    height: 116.8px;
}

.image {
    flex: 1.2;
    display: flex;
    align-items: center;
    text-align: center;
    max-height: 100%;
}

.text {
    flex: 2;
}

.img {
    max-height: 90%;
    max-width: 90%;
}

.a_img {
    height: 100%;
}

<div class="listings">
    <div class="image">
        <a class="a_img" href="www.google.com">
            <img class="img" src="https://cdn.shopify.com/s/files/1/2660/5202/products/shopify-image_0c6f7a25-f7ae-409f-a89b-df63d9c7b463_1400x.jpg?v=1586379733" alt="Product Image">
        </a>
    </div>
    <div class="text">
        some text<br>some text<br>some text<br>some text
    </div>
</div>

Percentage heights in CSS are tricky. Here's how they work: https://stackoverflow.com/a/31728799/3597276 — Michael Benjamin, Aug 04 '20 at 00:14

score 1 · Answer 1 · answered Aug 03 '20 at 23:03

you can simply replace the max-height to height on .image and thereafter alter everything you want to an expected output like the following

.listings {
  display: flex;
  margin-bottom: 1rem;
  height: 116.8px;
}

.image {
  /*flex: 1;*/
  /* altered */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100%;
  /* altered */
}

.text {
  flex: 1;
}

.img {
  max-height: 90%;
  max-width: 90%;
}

.a_img {
  height: 100%;
}

<div class="listings">
  <div class="image">
    <a class="a_img" href="www.google.com">
      <img class="img" src="https://cdn.shopify.com/s/files/1/2660/5202/products/shopify-image_0c6f7a25-f7ae-409f-a89b-df63d9c7b463_1400x.jpg?v=1586379733" alt="Product Image">
    </a>
  </div>
  <div class="text">
    some text<br>some text<br>some text<br>some text
  </div>
</div>

Seems like if I use a wide image, align-items is still not working? I solved it somehow by making .a_image another flex container. Thank you. — Ryan Eom, Aug 03 '20 at 23:26
what you want me to improve and upvote and accept the answer — Umutambyi Gad, Aug 03 '20 at 23:44

Setting height of img parent breaks flex align-items and text-align

1 Answers1