Flexbox：如何不通过超大的子元素（沿交叉轴）过度拉伸嵌套的flexbox[重复]

Question

我有一套嵌套的flexbox，大部分向下传递相同的大小。在最里面的flexbox，有一个图像。如果图像沿任何轴太长，我希望滚动条在最内侧（紫色）框。

我已经学会了如何防止主轴超调（链接1，链接2）。大体上

flex: auto;
width: 0;
overflow: auto; 

但我不知道，如何沿尺寸交叉轴进行限制。（注意：此处的横轴是垂直的。绿色和蓝色框有一个水平主轴，因为它们（默认）的弯曲方向是“行”。）

https://codepen.io/fnocke/pen/BayNPJq?editors=1100

Answer 1

放置<代码>高度：100% 到。一两个，因此您的弹性元件只能获得高度上的可用空间

（由提问者添加。）

1）到. one添加（也添加到. Two不会有什么坏处，并且可能是一个好主意，回顾IE-跨浏览器问题）

min-height: 0;

2）对两个. one，. Two添加：

height: 100%;

3） 到。一个添加（也添加到。两个不会造成伤害。不会截断子对象上的边界（顺便说一句，这是一个好迹象），所有边上的边界仍然正确可见

overflow: hidden;

Imho（1）是“最清洁”的解决方案。。。（因为它修复了根本原因，可能也是对付跨浏览器问题的最安全的赌注）