CSS white-space: nowrap; 不遵循max-width问题排查

问题说明 #

• 现象：white-space: nowrap属性导致右侧容器宽度异常增大，完全忽略父容器max-width: 1680px的约束设置
• 当前结果：右侧绿色容器宽度突破max-width: 1680px限制，超出父容器范围
• 预期结果：右侧容器宽度始终不超过父容器的max-width: 1680px限制

复现代码 #

<!DOCTYPE html>
<html>

<head>
    <title>test application</title>
    <style>
        body {
            background-color: red;
        }
        
       div{
          box-sizing: border-box;
         }


        .container {
            align-items: stretch;
            max-width: 1680px;
            margin-left: auto;
            margin-right: auto;
            display: flex;
            justify-content: flex-start;
        }

        .container .left {
            background-color: blue;
            display: flex;
            width: 18em;
            padding: 3em 2em 3em 2em;
            position: relative;
            color: white;
            flex-direction: column;
            margin-right: 2em;
            min-height: calc(100vh - 150px);
            flex-grow: 0;
            flex-shrink: 0;
        }

        .container .right {
            background-color: green;
            width: 100%;
            padding: 0em 3em 3em 3em;
            flex: 1
        }


        .b2 {
            width: auto;
            white-space: nowrap;
            overflow: hidden;
        }

        .abc {
            display: inline-flex;
            /* width: 1640px; */
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="left">left </div>
        <div class="right">
            <div class="b2">
                <div class="abc">
                    rightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightright
                </div>
                <div class="abc">
                    rightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightright
                </div>
            </div>
        </div>
    </div>
</body>

</html>

解决方案 #

方法一：给右侧容器添加溢出约束 #

给.right容器添加overflow: hidden，强制它限制内部元素的宽度，避免撑破父容器：

.container .right {
    background-color: green;
    width: 100%;
    padding: 0em 3em 3em 3em;
    flex: 1;
    overflow: hidden; /* 添加此行 */
}

方法二：让.b2继承父容器宽度 #

将.b2的width: auto改为width: 100%，让它完全继承父容器的宽度，再配合white-space: nowrap和overflow: hidden处理内容：

.b2 {
    width: 100%; /* 替换width: auto */
    white-space: nowrap;
    overflow: hidden;
}

方法三：给.abc设置宽度约束 #

给.abc添加width: 100%，让它占满父容器宽度，同时保留overflow: hidden截断过长内容：

.abc {
    display: inline-flex;
    width: 100%; /* 添加此行 */
    overflow: hidden;
}

内容的提问来源于stack exchange，提问作者Francies Fernandes