Why does the photo not respond to the size in Chromium?

Question

css

Good afternoon, colleagues!
Please, help me remember how to defeat the browser bug in Chromium:
SUBJECT:
There is a certain flex-container in which there is a photo and a div with a description, text, in short.
The photo is set to flex: 1 1 200px;
Textbox - flex: 1 1 300px;
PROBLEM:
This code only works in FFox. In Chromium, it is not possible to control the size of the photo. Stretches the photo to full size.
Code below
https://codepen.io/emelyanova/pen/BrXNZp

.media {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  img {
    flex: 0 1 100px;
  }
  .media-body {
    flex: 1 1 200px;
  }
  
}

Autoprefixer - works.
What am I doing wrong?
Thank you very much in advance!!!

Answer 1

Sobsna, why are flexes here?
If only 1 line:

.media{
    display:inline-block;
    font-size:0;
}
.media img{
    width:100px;
    display:inline-block;
}
.media .media-body{
    line-height:75px; //занимаемая картинкой высота
    font-size:14px;
    vertical-align:top;
    display:inline-block;
}

If on several lines (we add a nested tag to .media-body, for example p ):

.media .media-body{
    //line-height убираем
    height:75px; //занимаемая картинкой высота
}
.media-body p{
    width:150px; //ширина произвольная естесна
    transform:translateY(-50%);
    position:relative;
    top:50%;
}

The only negative is that you need to know the height, but, most likely, it is already fixed by design.
PS In FF your example doesn't work either, it looks the same with Chrome

Answer 2

flex: 1 1 200px means that the element should occupy all the free space, but not less than 200px, and if it has 200px, and there is another element nearby, it will divide the line with it. Therefore, the photo and description will divide the free space, while the photo will first take 200px, the description - 300px, and what remains will be divided equally and added to its main dimensions. Try to remove flex-grow from the photo.

Answer 3

Hello. This seems to be due to the difficulty of calculating proportions in the absence of an initial "canvas" size for the image. If you ask on the image itself: <img width="100" …>- your code should work.
Alternatively, you can write in styles:

img {
    flex: 1 1 auto;
    width: 100px;
  }

This will set the canvas size for the image, and then override it with flex-basis.
NB the closing tag of the flex container </a>- it's worth adding.