Flexbox - image same height

Question

I made container with attribute flex. Put inside 3 images with same height 830px but different width:

img 602x830 px
img 613x830 px
img 599x830 px

made for images attribute: width 100% All seems to look correct until screen size is more then 630px. After the screen became 630 px and less the height of one image (2-img) became less then others two images.

How to made all images the same height no matter what the screen size becomes.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css" type="text/css" />
<title>Document</title>
  <style type="text/css">
    .category-block {
      max-width: 768px; 
      margin:0 auto;
      overflow:hidden;
    }
    .flex-block {
      display:flex;
      flex-direction: row; 
      align-items: stretch; 
    }
    .flex-block img {
      width: 100%;
    }
  </style>
</head>
<body>
  <div class="category-block">
      <div class="flex-block">
          <div class="flex-block__area">
              <img src="1-img.jpg"></img>
          </div>
           <div class="flex-block__area">
              <img src="2-img.jpg"></img>
          </div>
           <div class="flex-block__area">
              <img src="3-img.jpg"></img>
          </div>
      </div>
  </div>
</body>
</html>

Is there something missing in my answer I can add or adjust, for you to accept? ... or it simply didn't work? — Asons

Asons Asons · Accepted Answer · 2017-08-22T11:48:12

This is an issue I found on Firefox and I haven't found why it fail.

Here is one workaround, using a Firefox CSS hack, making also the flex-block__area a flex container.

The CSS hack is needed to target only on Firefox, or else it will mess up the other browsers instead

Fiddle demo

Stack snippet

.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;
  }
}

<div class="category-block">
  <div class="flex-block">
    <div class="flex-block__area">
      <img src="http://placehold.it/602x830/f00">
    </div>
    <div class="flex-block__area">
      <img src="http://placehold.it/613x830/0f0">
    </div>
    <div class="flex-block__area">
      <img src="http://placehold.it/599x830/00f">
    </div>
  </div>
</div>

Flexbox - image same height

1 Answers