与其尝试将<div>的最大宽度设置在100%和适合内容之间，不如将<div>的最小宽度设置为其父容器的大小。我可以通过将有问题的容器（下例中的蓝色框）设置为inline-block，并在其父容器（下例中的红色框）下将最小宽度设置为100%来报告您所要求的内容。
这样，容器始终会100%地占据其父容器，直到您将父容器的大小调整为小于内部内容为止，在这种情况下，容器不会缩小到超过内容，因此父容器（红色框）必须滚动。
这适用于flex和inline-block的display属性，但不适用于block，也许这里有人可以解释原因。
下面是一个例子，我将父对象（红色框）的大小设置为可调整的，这样您就可以看到实际的解决方案：
第一个

可以使用max-width设置元素的最大宽度
第一个

width: max(100%, fit-content);

相当于

width: fit-content;
min-width: 100%;