How flex affects the width of an image?-CodePudding

I can't understand, how in my case flex affects the proportions of image. I've found on my own, that it is because of width: 100% which is set for img tag. But I don't understand, why it works in that way?

How sizes are calculated for each flex element in my case and why it doesn't get full space evenly distributed between 2 flex elements?

Here's the code:

#about {
  border: 2px solid blue;
}

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

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

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

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

Here's JS Fiddle

CodePudding user response：

Dont use flex-grow:1 instead you can use col-6 for both siblings. you will get your desire output

CodePudding user response：

It's because that's how flex-grow works. flex-grow: 1 means: flex-grow: 1, flex-shrink: 1 and flex-basis: auto and

flex:1 means flex-grow: 1, flex-shrink: 1 and importantly flex-basis: 0

Since, your image has width: 100%; so it's shrinking. And for the text their width is not defined so by default their width will be auto.

So, use flex: 1 if you want your columns equal sized!

#about {
  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 >
    <div >
      <img src="https://i.stack.imgur.com/yat2N.jpg" alt="">
    </div>
    <div > 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>