Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Doesn't resize image properly when parent is a flex item

  • No replies
  • 1 has this problem
  • 1 view
more options

With 3 images in a row, the middle will at narrower screen width's also shrink its height.

Code sample here: https://stackoverflow.com/q/45815720/2827823

CSS .category-block {

 max-width: 768px;
 margin: 0 auto;
 overflow: hidden;

}

.flex-block {

 display: flex;

}

.flex-block img {

 width: 100%;

}

HTML

     
     
     

Workaround here: https://stackoverflow.com/a/45816799/2827823

CSS .category-block {

 max-width: 768px;
 margin: 0 auto;
 overflow: hidden;

}

.flex-block {

 display: flex;

}

.flex-block img {

 width: 100%;

}

/* Firefox bug fix */ @supports (-moz-appearance:meterbar) and (display:flex) {

 .flex-block__area {
   display: flex;
 }

}

HTML