Html 在flexbox实现的第二列中创建可滚动的div

我有以下代码，包括：

• 我正在使用的左侧区域

  flex-shrink:0

  ，以便文本不会被破坏
• 应占据剩余屏幕空间的右侧区域
• 一个可滚动的div，其中包含一个应包含在正确空间中的表

问题是可滚动div没有包含在右侧空间中

我做错了什么

如何确保div实际滚动并且不会超出屏幕宽度？使用固定宽度的组件很容易，但是如何使用可变宽度的屏幕呢

html，正文{
宽度：100%；
}
.外部{
显示器：flex；
宽度：100%；
}
.左{
弹性收缩：0；
右边距：15px；
背景色：#ddd；
}
.对{
弹性：1
}
.可滚动的_框{
宽度：100%；
溢出-X：滚动；
边框：纯黑1px；
}
.头衔{
文本对齐：居中；
字体大小：粗体；
}

这里有些东西
这里还有别的东西吗
另一项
欢迎来到滚动框的主页
您在下面看到的框不应超出屏幕

请注意，由于这个问题，标题也显示得非常偏右

样品
样品
样品
样品
样品
样品
样品
样品
样品
样品
样品
样品
样品
样品
样品
样品
样品
样品
样品
样品
样品
样品
样品
样品
样品
样品
样品
样品
样品
样品
样品
样品
样品
样品
样品
样品
样品
样品
样品
样品
样品
样品

经过几个小时的努力，我似乎只需要添加

最小宽度：0到右侧flexbox

我不确定这是否是一个“黑客”的方式来实现这一点，或者是否有一个适当的方式，我应该这样做。在这方面如有任何反馈，我将不胜感激

有关更多信息，请参阅


html，正文{
宽度：100%；
}
.外部{
显示器：flex；
宽度：100%；
}
.左{
弹性收缩：0；
右边距：15px；
背景色：#ddd；
}
.对{
弹性：1；
最小宽度：0；
}
.可滚动的_框{
宽度：100%；
溢出-X：滚动；
边框：纯黑1px；
垫底：15px；
}
.头衔{
文本对齐：居中；
字体大小：粗体；
}

这里有些东西
这里还有别的东西吗
另一项
欢迎来到滚动框的主页
您在下面看到的框不应超出屏幕

请注意，由于这个问题，标题也显示得非常偏右

样品
样品
样品
样品
样品
样品
样品
样品
样品
样品
样品
样品
样品
样品
样品
样品
样品
样品
样品
样品
样品
样品
样品
样品
样品
样品
样品
样品
样品
样品
样品
样品
样品
样品
样品
样品
样品
样品
样品
样品
样品
样品
这不是一个老套的解决方案。它是干净有效的。您需要覆盖flex项目的
minwidth:auto
默认设置。完整的解释一式两份。