Html 最小宽度子元素-防止在重新调整大小时脱离父容器

我在父容器中有一个子元素，子元素的宽度为50%，最小宽度为30rem

当我将窗口大小从右侧引入时，在子元素达到其最小宽度30rem后，它开始破坏其包含/父元素，尽管有足够的可用空间

是否有办法设置它，使最小宽度值30rem保持不变，但当窗口缩小时，它仍会像在达到最小宽度值之前一样在父元素内滑动

这让我发疯。在代码StackOverflow代码段中，您可能需要全屏查看问题

代码笔：

正文{页边距：0； 填充：0； 显示器：flex； 证明内容：中心； 对齐项目：居中； 宽度：100%； 高度：100vh； } .tl{颜色：白色；} .科{ 位置：相对位置； 显示器：flex； 保证金：0自动； 宽度：100%； 框大小：边框框； 填充：2.48832rem 0； } .行{ 位置：相对位置； 证明内容：中心； 保证金：自动； 宽度：80%； 框大小：边框框； 背景：蓝色； 宽度：90%； 右：5%； 调整内容：灵活启动； 填充：4.2990； } .一列{ 位置：相对位置； 宽度：50%； 保证金：0； 填充：3.583rem 2rem； 左：40%； 背景：172731； 最小宽度：30雷姆； 顶部：7rem； 颜色：白色； } 标题 做你的事

Lorem ipsum door sit amet，concetetur adipiscing elit，sed do eiusmod temporal incidedut ut labour and dolore magna aliqua.

您必须使用calc来调整左侧定位。这不是一个完美的解决方案，但我认为它实现了你所追求的目标

身体{ 保证金：0； 填充：0； 显示器：flex； 证明内容：中心； 对齐项目：居中； 宽度：100%； 高度：100vh； } .tl{ 颜色：白色； } .科{ 位置：相对位置； 显示器：flex； 保证金：0自动； 宽度：100%； 框大小：边框框； 填充：2.48832rem 0； } .行{ 位置：相对位置； 证明内容：中心； 保证金：自动； 宽度：80%； 框大小：边框框； 背景：蓝色； 宽度：90%； 右：5%； 调整内容：灵活启动； 填充：4.2990； } .一列{ 位置：相对位置； 宽度：50%； 保证金：0； 填充：3.583rem 2rem； 左：calc60%-30rem； 背景：172731； 最小宽度：30雷姆； 顶部：7rem； 颜色：白色； } 标题 做你的事

Lorem ipsum door sit amet，一位杰出的领导者，他在劳动和生活中的时间是有限的

---

但是没有足够的空间。。。。在全尺寸下，35%左边距+50%宽度=85%，但一旦你开始变小，它是35%+30rem，30rem明显大于50%，否则它就没有必要了。。。然后超过100%。。。。？不管怎样，你想要的行为是什么？我希望暗盒保持最小宽度大小，但继续移动到它左边的可用空间。然后你需要对左边的边缘使用calc左：calc65%-30rem？@Paulie_D谢谢，这很有效。如果你想把它作为一个答案，我会把它标记为正确的。不过，我还是不太明白它是如何工作的。