CSS：根据单位，列布局中的水平溢出失败

Question

考虑这两个例子：

1. https://jsfiddle.net/obechtel/n8o056ja/2/
2. https://jsfiddle.net/obechtel/049ng6qc/1/

在第一个示例中，列宽声明为

50% 50%

，在第二个示例中，列宽声明为

50% 1fr

。这是唯一的区别。那么为什么

overflow: scroll

在第一个中起作用，而在第二个中不起作用？

（我有一个有两列的网站，我希望我的一些 div 具有示例 1 中的水平滚动行为。但是，第一列的宽度不仅仅是一个百分比值，而是一个百分比值的最大值和一个像素值。所以我想使用

1fr

或类似于第二列宽度的东西，但这会导致水平滚动失败。）