css `overflow:auto` 从弹性容器中溢出固定宽度子元素的大小

Question

我有一些非常奇怪的 CSS 谜题给你们：

考虑下面的树：

• app container

  • flex container

    • item1

      - 固定宽度（80px）

    • item2

      - 响应宽度（宽度：100%）。

      • MUI Stepper

        - 溢出：滚动，宽度：100%

这看起来类似于：

注意：

MUI Stepper

宽度和

item2

宽度在这里相等（按预期）。

MUI Stepper

宽度是

item2

的 100%，即为 item2 留下的空间宽度的 100%（即

flex container

宽度 -

item1

宽度）。
到目前为止一切顺利，太棒了。

现在，如果我们将屏幕尺寸缩小到小于内容所需的最小宽度

MUI Stepper

，会发生什么？好吧，我希望步进器中出现一个滚动条，并且

MUI Stepper

应保持为

flex container

.width -

item1

.width 的 100%，并且不应溢出到其父级

item2

之外。

实际结果：

“故障”的宽度与弹性盒子（item1）中第一个子项的宽度直接相关。如果第一个项目的宽度是 20，那么毛刺宽度也将是 20：

我的问题是，为什么当

MUI Stepper

有足够的空间容纳其内容时，其大小为 item2 剩余空间的 100%，而当屏幕被挤压并且没有足够的大小容纳步进器内容时，则

MUI Stepper

获取

flex container

父项的大小？

我知道我可以在

width:"calc(100% - 80px)"

中做类似

MUI Stepper

的事情。我想避免它（如果可能的话）。

欢迎提供好的解释。我无法从我找到的任何文档中理解这种效果。预先感谢！

演示应用程序在这里

Answer 1

好吧，解决方案是将

overflow: 'hidden'

设置为

item 2

。

claude ai 给了我足够多的答复（CGPT 或 Gemini 无法提供帮助。claude 一口气给出了完全准确的答复！）。