当右侧div达到最大宽度时，使左侧div填充剩余空间的Flex方法

Question

我有一个弹性盒子内有两个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%" 也会出现同样的情况，不幸的是。

- Daniel

---

flex-grow:1 to A ? - Temani Afif

Answer 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;
}

- Kay Angevare