title: How flex: 1 affects height of flex items?
body: <p>I can't understand, how <code>flex: 1</code> affects the height of an element, even if I set the height of the <code>section</code> to 500px, the image will go out of the section.</p>
  <p>Here's the code:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#about {
    height: 500px;
  }
  
  .row {
    display: flex;
  }
  
  img {
    display: block;
    width: 100%;
    height: 100%;
  }
  
  .column {
    flex: 1;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section id="about"&gt;
    &lt;div class="row"&gt;
      &lt;div class="column"&gt;
        &lt;img src="https://i.stack.imgur.com/yat2N.jpg" alt=""&gt;
      &lt;/div&gt;
      &lt;div class="column"&gt; 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. &lt;/div&gt;
    &lt;/div&gt;
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Can you please explain, why and how <code>flex: 1</code> affects the height of an <code>img</code> or another items.</p>