Flexbox：如何通过超大的子元素不过度拉伸嵌套的flexbox

Question

我有一组嵌套的flexbox，大部分向下传递相同的大小。在最里面的flexbox（绿色）中，有一个图像。如果该图像沿任何轴都太长，我需要在freen框上使用滚动条。 （Chrome浏览器，当前版本。）

我已经学习了如何防止沿主轴（link 1，link 2）的过冲。基本上

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

但是我不知道如何限制跨尺寸轴。（（注意：交叉轴在此是垂直的。绿色和蓝色框的水平轴是（默认）弯曲方向是'行'。）

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

失败的尝试：

• 高度百分比将相对于图像高度，而不是盒子高度。 （甚至没有缩小父框）
• min-height或max-height周围的任何东西>
• self-align: stretch，也没有运气...

我有一组嵌套的flexbox，大部分向下传递相同的大小。在最里面的flexbox（绿色）中，有一个图像。如果该图像沿任何轴都太长，我希望在...

Answer 1

将height: 100%;放置到.one, .two，这样您的伸缩元素将只获得可用的高度空间