CSS 仅在达到 max-width 时显示滚动条

Question

我有两个 child div 在 parent div 和 display: flex.

这是代表我的情况的虚拟片段：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div style="display: flex;">
        <div style="width: 100%;">
            long text long text long text long text long text long text long text long text long text long text long
            text long text long text long text long text long text long text long text long text long text long text
            long text long text long text long text long text long text long text long text long text long text long
            text long text long text long text long text long text long text long text long text long text long text
            long text long text long text long text long text long text long text long text long text long text long
            text long text long text long text long text long text long text long text long text long text long text
            long text long text long text long text long text long text long text long text long text long text long
            text long text long text long text long text long text long text long text long text long text long text
            long text long text long text
        </div>
        <div style="width: fit-content; max-width: 60%; display: flex; overflow: auto;">
            <div style="height: 100px; width: 100px; min-width: 100px; background-color: red; margin-right: 15px;"></div>
            <div style="height: 100px; width: 100px; min-width: 100px; background-color: red; margin-right: 15px;"></div>
            <div style="height: 100px; width: 100px; min-width: 100px; background-color: red; margin-right: 15px;"></div>
            <div style="height: 100px; width: 100px; min-width: 100px; background-color: red; margin-right: 15px;"></div>
        </div>
    </div>
</body>

</html>

输出如下所示：

右边div的内容会动态添加，本例中我们有红框。所以它可能包含 0 个或多个红色框。

我想要的是：

我希望右侧 div 展开，只要它没有达到最大设置宽度 60%，达到之后我希望水平滚动条出现div.
随着右侧 div 扩展（直到达到最大宽度的 60%），左侧 div 将缩小。

如果我从右侧 div 中删除 overflow: auto，上面的代码片段将执行此操作，但是当它达到最大值 60% 时，水平滚动条将出现在整个页面上，而不是只出现右侧 div 区域。

如果我离开 overflow: auto 那么滚动条会从头开始出现（就像你在图片中看到的那样，我只希望它在 max-width 的 60% 之后出现超过）。

我该如何处理？

编辑：

这是代码笔link：https://codepen.io/transcend/pen/wvWyZvK

Answer 1

更新您的 CSS 如下：

.container {
  display: flex;
}
.full-width {
  width: 100%;
  flex: 40%;
}
.box-container {
  width: fit-content;
  max-width: 60%;
  display: flex;
  overflow-x: auto;
}
.box {
  height: 100px;
  width: 100px;
  min-width: 100px;
  background-color: red;
  margin-right: 15px;
}

我用过overflow-x:auto;这有助于生成水平滚动条。希望一切顺利。

Answer 2

将下面这行添加到您的 Class 或 Id

overflow:auto;

像这样

 .box{
    height:100px;
    width:100px;
    overflow:auto;
    }

CSS 仅在达到 max-width 时显示滚动条

CSS show scrollbar only when max-width reached

html

css

overflow