当右 div 处于最大宽度时，Flex 左 div 填充剩余空间答案

【问题标题】：Flex left div fill remaining space when right div is at maximum width当右 div 处于最大宽度时，Flex 左 div 填充剩余空间
【发布时间】：2022-10-04 17:52:08
【问题描述】：

我在一个弹性盒子里有两个 div。 div A 在左边，div B 在右边。

我希望 div A 占据 60% 的弹性盒子，而 div B 占据 40% 的弹性盒子。你可以想象，我的 css 看起来像这样：

.container {
    display: flex;
    justify-content: start; 
    flex-direction: column;
}
.div_a {
    width: 60%;
}
.div_b {
    width: 40%;
}

此外，浏览器将如下所示：

现在，我希望 div B 具有最大和最小宽度，代码现在看起来像这样：

.container {
    display: flex;
    justify-content: start; 
    flex-direction: column;
}
.div_a {
    width: 60%;
}
.div_b {
    width: 40%;
    max-width: 768px; 
    min-width: 480px; 
}

不幸的是，这会导致大型浏览器出现这种情况。

当 div B 达到其最大宽度时，我希望 div A 填充其余空间，如下所示：

任何想法或修复将不胜感激，非常感谢您提前。

我应该提到，不幸的是，Div A 的min-width: 60% 会产生相同的情况。

【问题讨论】：

flex-grow:1 到 A ？

标签： css flexbox

【解决方案1】：

这是您转向flex-grow 的完美案例。由于您使用的是 60%/40% 的大小，您可以使用 flex-grow:6 和 flex-grow:4，或者：flex-grow:3 和 flex-grow:2。甚至：flex-grow:1.5 和 flex-grow:1，因为该属性也接受小数！

.div_a {
    flex-grow:3;
}
.div_b {
    flex-grow: 2;
    max-width: 768px; 
    min-width: 480px; 
}

flex-grow 是一个属性，它将告诉父级（flexbox）将可用宽度划分为其子元素中指定的flex-grow 数量的总和。通过限制.div_b 的最大宽度，您可以告诉 flexbox 在达到该最大值后停止增加宽度，剩余的宽度将保留给其他元素（在这种情况下为.div_a）。

还

我确实想指出您正在使用flex-direction:column，但您正在尝试创建基于行的布局。最好使用flex-flow: row nowrap。这是同时声明flex-direction 和flex-wrap 的简写，并且row nowrap 的值将告诉父级将所有内容强制在水平布局中的一行上。

.container {
    display: flex;
    justify-content: start; 
    // flex-direction: column;
    flex-flow: row nowrap;
}

【讨论】：