首先，您应该注意flex-grow 默认等于1，因此您不需要设置它。然后，你需要了解“循环依赖”和“百分比大小”。
在您的情况下，您的图像应该是其父宽度的 100%，但其父项是弹性项目，其宽度取决于其内容（图像宽度也是如此）。
我在这里解释了类似的行为：How do browsers calculate width when child depends on parent, and parent's depends on child's。这同样适用于您的情况，width:100% 将禁用图像大小的最小贡献。就像图像最初不存在一样。
这是浏览器将执行的步骤。
首先，每列都根据其内容调整大小。没有发生收缩（就像设置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>
如果您检查每列的宽度，您将获得第一列的1604 和第二列的5097。您可能会得到略有不同的值，但最重要的是注意差异，这是关键。
现在两列都需要缩小以适应容器宽度。假设容器宽度等于Xpx。我们将有一个等于(5097 + 1604) - X = 6701 - X 的溢出（也称为空闲负空间）。
每列的宽度公式为：
1st = 1604 - ((X - 6701) * 1604/6701) = 1604 - ((6701 - X) * 0.24)
2nd = 5097 - ((X - 6701) * 5097/6701) = 5097 - ((6701 - X) * 0.76)
从上面首先要注意的是，总和会给你X，这是合乎逻辑的结果，因为两列都需要缩小直到它们适合容器宽度。
如果你执行一些计算，你可以找到每一列的宽度，你会发现第二个总是更大。
如果X = 1000，您将拥有235.76 / 764.24
如果X = 800，您将拥有187.6 / 612.24
这是 flexbox 算法背后的逻辑。收缩时两列的比例要保持一致（收缩后大的还是大的）
最后，浏览器会将图像放在计算宽度的100% 的第一列中。
没有width:100%，您将面临图像元素的最小约束，这将防止第一列缩小到图像大小。您的图像大小等于1604，因此您的第一列不能变小，因此第二列将尝试缩小到0，但它不能小于给出以下结果的最长单词。
#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>
两列都溢出了。第一个等于图像宽度，第二个等于最长的单词。
您可以通过在列上使用min-width:0 来禁用此功能：
#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>
您将得到最初计算的相同宽度，但现在列内的图像会溢出。