First, you should note that flex-grow is by default equal to 1 so you don't need to set it. Then, you need to understand "cyclic dependency" and "percentage sizing".
In your case, you have a image that should be 100% of its parent width but its parent is a flex item and its width depend on its content (the image width as well).
I have explained a similar behavior here: How do browsers calculate width when child depends on parent, and parent's depends on child's. The same apply in your case and the width:100% will disable the minimum contribution of the image size. It's like the image doesn't exist initially.
Here is the steps the browser will perform.
First, each column is sized with its content. No shrink is occurring (It's like setting flex-shrink:0)
#about {
border: 2px solid blue;
}
.row {
display: flex;
border: 2px solid black;
}
img {
display: block;
width: auto;
}
.column {
flex-shrink: 0;
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>
If you check the width of each column you will get 1604 for the first one and 5097 for the second. You may get slightly different values but the most important is to notice the difference which is the key.
Now both column need to shrink to fit the container width. Let's suppose the container width is equal to Xpx. We will have an overflow (also called free negative space) equal to (5097 + 1604) - X = 6701 - X.
The width formula for each column will be:
1st = 1604 - ((X - 6701) * 1604/6701) = 1604 - ((6701 - X) * 0.24)
2nd = 5097 - ((X - 6701) * 5097/6701) = 5097 - ((6701 - X) * 0.76)
The first thing to notice from the above is that the sum will give you X which is the logical result since both column need to shrink until they fit the container width.
And if you perform some calculation you can find the width of each column and you will notice that the second one is always bigger.
If X = 1000 you will have 235.76 / 764.24
If X = 800 you will have 187.6 / 612.24
This is the logic behind the flexbox algorithm. Both columns should keep the same proportion when shrinking (the bigger item remain the bigger one after shrinking)
At the end, the browser will place the image inside the fist column having 100% of the calculated width.
Without width:100% you will face the minimum constraint of the image element which will prevent the first column from shrinking past the image size. Your image size is equal to 1604 so your first column cannot go smaller so the second column will try to shrink to 0 but it cannot go smaller than the longest word which gives you the following result.
#about {
border: 2px solid blue;
}
.row {
display: flex;
border: 2px solid black;
}
img {
display: block;
}
.column {
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>
Both columns are overflowing. The first one is equal to the image width and the second one to the longest word.
You can disable this by using min-width:0 on the column:
#about {
border: 2px solid blue;
}
.row {
display: flex;
border: 2px solid black;
}
img {
display: block;
}
.column {
border: 2px dashed red;
min-width:0;
}
<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>
You will get the same width calculated initially but now the image inside the column will overflow.
