Flex布局：右侧Div达最大宽度时左侧Div填充剩余空间

首先纠正原代码的核心错误：你设置了flex-direction: column，这会让两个Div垂直排列，而非你需要的左右布局，这是导致后续问题的根源之一。

针对你的需求（Div A左、Div B右；初始比例60%/40%；Div B限制480px-768px宽；宽屏时Div B到最大宽度后，Div A填充剩余空间），修改后的CSS代码如下：

.container {
    display: flex;
    flex-direction: row; /* 关键：改为水平排列 */
}

.div_a {
    flex: 1; /* 自动填充容器剩余空间 */
    /* 可选：设置最小宽度，避免Div A过窄 */
    min-width: calc(100% - 768px);
}

.div_b {
    flex: 0 1 auto; /* 不放大、可缩小、初始宽度由width/内容决定 */
    width: 40%; /* 初始占容器40%宽度 */
    min-width: 480px;
    max-width: 768px;
}

原理说明 #

1. flex-direction: row：将容器内元素改为水平排列，实现Div A左、Div B右的布局。
2. Div A的flex:1：flex:1等价于flex-grow:1; flex-shrink:1; flex-basis:0%，意味着当容器有剩余空间时，Div A会自动扩展填充；空间不足时，会按比例缩小。
3. Div B的flex属性与宽限设置：
   • flex:0 1 auto：flex-grow:0确保Div B不会抢占额外空间，flex-shrink:1允许它在容器变窄时缩小，flex-basis:auto让它先遵循width:40%的初始比例。
   • min-width和max-width限制Div B的宽度范围：当容器足够宽时，Div B先按40%宽度显示，直到达到768px的最大值；当容器变窄，Div B缩小到480px后不再缩小，此时Div A会继续收缩以适应容器宽度。

效果验证 #

• 宽屏（如容器宽度2000px）：40%宽度为800px，超过max-width768px，Div B固定为768px，Div A填充剩余的2000-768=1232px。
• 中等宽度（如容器宽度1200px）：40%宽度为480px，刚好等于min-width，Div B为480px，Div A为720px（60%比例）。
• 窄屏（如容器宽度1000px）：40%宽度为400px，小于min-width480px，Div B固定为480px，Div A填充剩余的520px。

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