Image inside flex parent is not overflowing in chrome

Question

My image is acting strangely on Chrome and it gets shrunk. I am trying to achieve the effect like on Firefox but the image is not overflowing instead it shrinks down.

Here is my code. Check my second card image in chrome and in firefox:

<div class="card-group">
  <div class="card">
    <div class="card__imgContainer">
      <img class="card__img" src="https://www.pierrot-bg.com/images/news/2.jpg" alt="Меко казано" style="">
    </div>
    <div class="card__content">
      <h2 class="card__heading">Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet..</h2>
      <div class="card__info">
        <span class="card__time"><span class="card__icon icon-calendar"></span>02.06.2019;</span>
        <span class="card__price"><span class="card__icon icon-price--sm"></span>8.00 лв; 10.00 лв; 12.00лв;</span>
      </div>
      <div class="card__buttons">
        <a class="button card__button" href="./spectacle.html">Виж повече</a>
        <a class="button button--plum button--buy card__button" href="">Купи билет <span class="button__icon icon-price"></span></a>
      </div>
    </div>
  </div>

  <div class="card">
    <div class="card__imgContainer">
      <img class="card__img" src="https://www.pierrot-bg.com/images/news/Meko-kazano_1.jpg" alt="Меко казано" style="">
    </div>
    <div class="card__content">
      <h2 class="card__heading">Lorem, ipsum.</h2>
      <div class="card__info">
        <span class="card__time"><span class="card__icon icon-calendar"></span>02.06.2019;</span>
        <span class="card__price"><span class="card__icon icon-price--sm"></span>8.00 лв; 10.00 лв; 12.00лв;</span>
      </div>
      <div class="card__buttons">
        <a class="button card__button" href="./spectacle.html">Виж повече</a>
        <a class="button button--plum button--buy card__button" href="">Купи билет <span class="button__icon icon-price"></span></a>
      </div>
    </div>
  </div>

</div>

.card {
  & {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 60%;
  }
  &__imgContainer {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    overflow: hidden;
  }
  &__img {
    display: block;
    flex: 1 1 0;
    width: 100%;
  }
  &__content {
    padding: 10px 30px 15px;
    background: #4821f5;
    /* Old browsers */
    background: -moz-linear-gradient( 45deg, #4821f5 0%, #3b8dd4 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient( 45deg, #4821f5 0%, #3b8dd4 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient( 45deg, #4821f5 0%, #3b8dd4 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#4821f5", endColorstr="#3b8dd4", GradientType=1);
    /* IE6-9 fallback on horizontal gradient */
  }
  &__info {
    & {
      margin-top: 15px;
      margin-bottom: 10px;
    }
    &>* {
      display: block;
      font-size: 13px;
      display: flex;
      align-items: center;
    }
    &>*+* {
      margin-top: 5px;
    }
  }
  &__icon {
    margin-right: 6px;
    line-height: inherit;
  }
  &__heading {
    font-size: 36px;
    line-height: 1;
  }
  &__buttons {
    & {
      display: flex;
      flex-wrap: wrap;
      margin: -8px;
    }
    &>* {
      margin: 8px;
    }
  }
  &__button {
    padding-top: 0.65em;
    padding-bottom: 0.65em;
  }
  &__textbox {
    margin-top: 20px;
  }
}

.card-group {
  display: flex;
  flex-wrap: wrap;
  margin: -1%;
  &>* {
    width: 31%;
    margin: 1%;
  }
}

Js Fiddle

I am expecting my image to act like in Firefox and to be cut like that and I don't want to use object-fit.

score 2 · Accepted Answer · answered Jun 13 '19 at 10:45

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}

.card {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 60%;
}

.card__imgContainer {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  overflow: hidden;
}

.card__img {
  display: block;
  flex: 1 1 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card__content {
  padding: 10px 30px 15px;
  background: #4821f5;
  /* Old browsers */
  background: -moz-linear-gradient(45deg, #4821f5 0%, #3b8dd4 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(45deg, #4821f5 0%, #3b8dd4 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(45deg, #4821f5 0%, #3b8dd4 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#4821f5", endColorstr="#3b8dd4", GradientType=1);
  /* IE6-9 fallback on horizontal gradient */
}

.card__info {
  margin-top: 15px;
  margin-bottom: 10px;
}

.card__info>* {
  display: block;
  font-size: 13px;
  display: flex;
  align-items: center;
}

.card__info>*+* {
  margin-top: 5px;
}

.card__icon {
  margin-right: 6px;
  line-height: inherit;
}

.card__heading {
  font-size: 36px;
  line-height: 1;
}

.card__buttons {
  display: flex;
  flex-wrap: wrap;
  margin: -8px;
}

.card__buttons>* {
  margin: 8px;
}

.card__button {
  padding-top: 0.65em;
  padding-bottom: 0.65em;
}

.card__textbox {
  margin-top: 20px;
}

.card-group {
  display: flex;
  flex-wrap: wrap;
  margin: -1%;
}

.card-group>* {
  width: 31%;
  margin: 1%;
}

<div class="card-group">
  <div class="card">
    <div class="card__imgContainer">
      <img class="card__img" src="https://www.pierrot-bg.com/images/news/2.jpg" alt="Меко казано" style="">
    </div>
    <div class="card__content">
      <h2 class="card__heading">Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet..</h2>
      <div class="card__info">
        <span class="card__time"><span class="card__icon icon-calendar"></span>02.06.2019;</span>
        <span class="card__price"><span class="card__icon icon-price--sm"></span>8.00 лв; 10.00 лв; 12.00лв;</span>
      </div>
      <div class="card__buttons">
        <a class="button card__button" href="./spectacle.html">Виж повече</a>
        <a class="button button--plum button--buy card__button" href="">Купи билет <span class="button__icon icon-price"></span></a>
      </div>
    </div>
  </div>

  <div class="card">
    <div class="card__imgContainer">
      <img class="card__img" src="https://www.pierrot-bg.com/images/news/Meko-kazano_1.jpg" alt="Меко казано" style="">
    </div>
    <div class="card__content">
      <h2 class="card__heading">Lorem, ipsum.</h2>
      <div class="card__info">
        <span class="card__time"><span class="card__icon icon-calendar"></span>02.06.2019;</span>
        <span class="card__price"><span class="card__icon icon-price--sm"></span>8.00 лв; 10.00 лв; 12.00лв;</span>
      </div>
      <div class="card__buttons">
        <a class="button card__button" href="./spectacle.html">Виж повече</a>
        <a class="button button--plum button--buy card__button" href="">Купи билет <span class="button__icon icon-price"></span></a>
      </div>
    </div>
  </div>

</div>

.card__img had to be given a height of 100% and object-fit:cover

I don't want to use object-fit because it's not supported in IE11. It was my old solution btw — Cloudy Skies, Jun 13 '19 at 10:51
Apologies. I didn't read your post script. I think this might help you out - https://stackoverflow.com/a/22883146/2427237 — nimsrules, Jun 13 '19 at 10:57
This didn't help me. I just used object-fit with polyfill and now everything is fine. Thank you anyways. — Cloudy Skies, Jun 14 '19 at 11:32

Image inside flex parent is not overflowing in chrome

1 Answers1