How flex: 1 affects height of flex items?

Firstly, you've defined the container with display: flex. The default flex-direction is row.

This means the the main axis is horizontal.

Hence, the flex property is controlling width. It has no affect on height.

You would have to shift the main axis (by adding flex-direction: column) in order to apply the flex property vertically.

Secondly, if you change the height: 500px to min-height: 500px, you will solve the overflow problem (without having to change flex-direction).

#about {
  min-height: 500px;
  border: 2px solid blue;
}

.row {
  display: flex;
  border: 2px solid black;
}

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

.column {
  flex: 1;
  border: 2px dashed red;
}

<section id="about">
  <div class="row">
    <div class="column">
      <img src="https://i.stack.imgur.com/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>

jsFiddle demo

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