How flex: 1 affects height of flex items?

Question

I can't understand, how flex: 1 affects the height of an element, even if I set the height of the section to 500px, the image will go out of the section.

Here's the code:

#about {
  height: 500px;
}

.row {
  display: flex;
}

img {
  display: block;
  width: 100%;
  height: 100%;
}

.column {
  flex: 1;
}

<section id="about">
  <div class="row">
    <div class="column">
      <img src="https://i.sstatic.net/yat2N.jpg" alt="">
    </div>
    <div class="column"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur quibusdam dicta dolore suscipit quidem, hic nihil aliquid officia porro illum! Necessitatibus cupiditate, sapiente cum recusandae tenetur dolore veritatis in temporibus perferendis.
      Ex corrupti voluptatibus eaque aliquam quis soluta veniam non dicta repellendus ea iure temporibus assumenda placeat accusantium quae iste, corporis maxime dolorum quisquam neque est sint asperiores doloribus. Quibusdam ducimus saepe distinctio
      illum veniam voluptates amet quod perferendis dolorem, deleniti mollitia. Ab aperiam, ea itaque tempore molestias ullam sint accusamus totam reiciendis laborum. At natus consequatur ex officia. Porro dolor accusamus blanditiis nam commodi provident
      assumenda facere adipisci perferendis. </div>
  </div>
</section>

Can you please explain, why and how flex: 1 affects the height of an img or another items.

Answer 1

It doesn't, align-items has a default value of normal, which in flexbox contexts is the same as align-items: stretch.

This causes the two flex children (the .column with the image and the .column with the text) to be the same height.

When the text is taller than the image, the image container stretches. If the image is taller, the text container stretches.

To remove this effect, add

.row {
  align-items: flex-start;
}

To have the items aligned to the top without the flex children stretching.