解
更换：
.row { flex: 1; border: 1px solid black; display: flex; align-items: stretch;}与：
.row { flex: 1 1 0px; border: 1px solid black; display: flex; align-items: stretch; }说明
你写了：
问题是，为什么块2中间列的第二行中的图像不缩小到包含该行的行的高度？
看来您只在Chrome中测试了代码，因为对于Firefox和IE11，问题的前提是错误的。
在那些浏览器中，第二块中的狗的图像很好地包含在flex项目中。图像在IE中有些拉伸，但是仍然包含在内。
您的问题似乎与Chrome有关。（我没有在Safari中进行测试，但这是像Chrome这样的WebKit浏览器，因此解决方案可能相似。）
这个问题的解决方法很有趣，因为属性值的微小差异（似乎微不足道）使Chrome呈现功能产生了很大差异。
您的图片是的
div.row具有行方向的flex容器的子元素（更具体而言：flex项）。
div.row也是较大容器的柔性项目（沿列方向），并已
flex: 1应用。Chrome中的问题根源于该
flex: 1声明。
什么flex: 1
意思
该
flex属性是简写
flex-grow，
flex-shrink和
flex-basis。
flex: 1是等效的
flex-grow:1，
flex-shrink: 1并
flex-basis: 0%。
请注意，后面的百分号（％）
0。它是在flexbox规范的 CommonValues中
flex定义的，实际上有所不同。
在Chrome中尝试以下操作：
替换
flex: 1在
div.row用它的等效
flex: 1 1 0%。您会注意到渲染时没有任何变化。
现在删除百分号并再次运行。图像捕捉到位。
flex: 1 1 0px就像CSS-Tricks中所述，也可以使它起作用。
因此，使用
px或不使用单位（而不是百分比）来
0解决Chrome中的问题…并且在Firefox中不会破坏任何内容。
但是，在IE11中，
px可以工作，但无单位不能。实际上，无单元消除了布局。
但是IE11是另一个故事…
IE11 在浏览器支持数据网站caniuse.com上一直显示对flexbox的 完全支持 ，直到最近，由于“存在大量错误” ，IE11 降级为 部分支持。在测试上述演示时，IE11定期刷新时呈现相同代码的方式有所不同。有关问题列表，请参见caniuse.com上的“已知问题”选项卡。
_请注意， 除了IE 8和9之外，所有主要浏览器都支持flexbox
。某些最新的浏览器版本（例如Safari8和IE10）需要供应商前缀。如上所述，由于一些已知的错误，IE11提供了部分支持。要快速添加所需的所有前缀，请使用[Autoprefixer。
