Html 溢出的最大宽度：滚动元素以匹配flex grow父元素的宽度

我有一个固定宽度的容器

#容器
，它有三个子项
。每个容器都有一个100px的弹性基础，但中间的一个
。项目增长
应该增长，以便使用
#容器
的所有宽度。这和预期的一样

.item grow
元素有另一个子元素
#太大
，它可能比可用父元素的宽度宽，因此它被包装在一个
#滚动
容器中，其中包含
溢出：滚动
和
最大宽度：100%

问题是，
#滚动
忽略了
最大宽度：100%
，并强制父级
.item grow
增长，从而使容器
#容器
增长

如果我设置
max width:296px
而不是
max width:100%
它可以工作，但我正在寻找一个动态（仅CSS）解决方案

在嵌入的代码中，您可以找到一个滑块，它改变了
#太大的大小
，您可以清楚地看到，它正在增长父级，而不使用滚动条


函数设置大小（newValue）{
让elem=document.getElementById（“太大”）；
elem.setAttribute（“style”，宽度：${newValue}px；高度：${newValue}px`）；
}
#容器{
背景色：红色；
显示器：flex；
宽度：500px；
高度：200px；
}
.项目{
显示器：flex；
flex-grow:0；
弹性收缩：0；
弹性基准：100px；
边框：纯黑1px；
背景颜色：灰色；
}
.项目增长{
柔性生长：1；
对齐项目：居中；
}
.中心包装{
保证金：自动；
显示：表格单元格；
}
.卷轴{
溢出：滚动；
最大宽度：100%；/*我想要这方面的当前宽度*/
/*最大宽度：296px*/
最大高度：100%；/*我希望这方面与当前父母的高度一致*/
/*最大高度：200px*/
}
#太大{
背景颜色：绿色；
宽度：100px；
高度：100px；
}
要实现这一点，您可以放下
中间包装
并在
滚动
上设置
边距：auto

然后
项
需要
最小宽度：0
以允许其小于其内容

对于
max height:100%
要工作（跨浏览器），
项grow
需要一个高度


堆栈片段


函数设置大小（newValue）{
让elem=document.getElementById（“太大”）；
elem.setAttribute（“style”，宽度：${newValue}px；高度：${newValue}px`）；
}
#容器{
背景色：红色；
显示器：flex；
宽度：500px；
高度：200px；
}
.项目{
显示器：flex；
弹性基准：100px；
边框：纯黑1px；
背景颜色：灰色；
框大小：边框框；/*已添加*/
最小宽度：0；/*已添加*/
}
.项目增长{
柔性生长：1；
对齐项目：居中；
高度：100%；/*已添加*/
}
.卷轴{
页边距：自动；/*已添加*/
溢出：滚动；
最大宽度：100%；
最大高度：100%；
}
#太大{
背景颜色：绿色；
宽度：100px；
高度：100px；
}
绿色盒子永远不会比它的容器大。容器具有
最大宽度：100%
，
最大高度：100%
和
柔性增长：1
。所以没有理由触发滚动条。