Flexbox：如何通过超大的子元素（沿横轴）不过度拉伸嵌套的 Flexbox
Flexbox: how to not overstretch a nested flexbox by an oversized child element (along cross axis)
我有一组嵌套的 flexbox，大部分向下传递相同的大小。在最里面的 flexbox 中，有一个图像。如果该图像沿任何轴太长，我希望最里面（紫色）框上有滚动条。
我已经学会了如何防止沿主轴的超调 (, link 2)。基本上
flex: auto;
width: 0;
overflow: auto;
但我不知道如何限制尺寸横轴。
（注意：这里的横轴是垂直的。绿色和蓝色框的主轴是水平的，因为它们的（默认）弹性方向是 'row'。）
把 height: 100%; 放到 .one, .two 这样你的 flex 元素就只会得到可用的 space 高度
（提问者添加。）
有趣的是，似乎有 3 个解决方案：
1) 到 .one 添加（也添加到 .two 不会有什么坏处，回忆起 IE-crossbrowser-issues 可能是个好主意）
min-height: 0;
2) 对两个 .one, .two 添加：
height: 100%;
3) 添加到 .one（也添加到 .two 不会造成伤害。不会截断 children 上的边框顺便说一句（这是一个好兆头），仍然一切正常在所有边缘都可见）
overflow: hidden;
恕我直言 (1) 是 "cleanest" 解决方案...（因为它解决了根本原因，可能也是对 cross-browser-issues 最安全的选择）
我有一组嵌套的 flexbox，大部分向下传递相同的大小。在最里面的 flexbox 中，有一个图像。如果该图像沿任何轴太长，我希望最里面（紫色）框上有滚动条。
我已经学会了如何防止沿主轴的超调 (
flex: auto;
width: 0;
overflow: auto;
但我不知道如何限制尺寸横轴。 （注意：这里的横轴是垂直的。绿色和蓝色框的主轴是水平的，因为它们的（默认）弹性方向是 'row'。）
把 height: 100%; 放到 .one, .two 这样你的 flex 元素就只会得到可用的 space 高度
（提问者添加。）
有趣的是，似乎有 3 个解决方案：
1) 到 .one 添加（也添加到 .two 不会有什么坏处，回忆起 IE-crossbrowser-issues 可能是个好主意）
min-height: 0;
2) 对两个 .one, .two 添加：
height: 100%;
3) 添加到 .one（也添加到 .two 不会造成伤害。不会截断 children 上的边框顺便说一句（这是一个好兆头），仍然一切正常在所有边缘都可见）
overflow: hidden;
恕我直言 (1) 是 "cleanest" 解决方案...（因为它解决了根本原因，可能也是对 cross-browser-issues 最安全的选择）