Html 如果两个div不能挨在一起，我如何能100%拉伸它们？

left，left，left，left div
对，对，对，对

当上面的2个div被强制到不同的行时，我希望它看起来像这样：
左，左，左，左div
对，对，对，对
#a
{
背景色：红色；
浮动：左；
}
#b
{
背景颜色：绿色；
浮动：对；
}
#a2
{
背景色：红色；
}
#b2
{
背景颜色：绿色；
}

所以，左侧和右侧div是可以的，但它们迟早会被强制到新行。这是我想要100%拉伸它们的时候

---

您可以使用flex实现这一点，如下所示：

#容器{
显示器：flex；
柔性包装：包装；
}
#a
{
背景色：红色；
浮动：左；
最小宽度：初始宽度；
}
#b
{
背景颜色：绿色；
浮动：对；
}

左，左，左，左，左，左，左，左，左div
对，对，对，对，对，对，对，对

100%拉伸位置可能重复？

<div id="a">left, left, left, left div</div>
<div id="b">right, right, right, right div</div>
<div style="clear: both;"></div>
<hr>
This is how I want it to look alike, when the 2 divs above gets enforced to different lines:
<div id="a2">left, left, left, left div</div>
<div id="b2">right, right, right, right div</div>

#a
{
    background-color: red;
    float: left;
}

#b
{
    background-color: green;
    float: right;
}

#a2
{
    background-color: red;
}

#b2
{
    background-color: green;
}