Html 如何使自动调整的DIV宽度达到100%？

我有一个动态生成div的页面。 这些DIV放在另一个“父”DIV（

class=“container”

）中。我需要显示每行宽度相等的2个div（现在是940px，占宽度的100%）

但有时有些div里面有很长的内容，它们需要更多的空间。因此，我不能将宽度限制为固定的数字。我使用

最小宽度：460px仅限

如果我在最后一行还有一个DIV（可能发生），我需要将这个DIV一直拉伸到960px（100%）。这种情况并不总是一样的。有时只有一个DIV，有时有两个（在页面末尾）。我需要CSS来“理解”：如果DIV后面有一个空格，DIV应该被拉伸到全宽（960px），如果右边有另一个DIV，两个DIV应该是480px并且在同一行中

我也试过
：last child
，但对我不起作用

要查看代码中的摘要，这里有一个小列表，列出了我所拥有的内容：

<style>
    .container {
        width: 960px;
    }
    .content {
        float: left;
        min-width: 480px;
    }
</style>

<div class="container">
    <div class="content" style="background-color: Orchid;">Hi! I am content</div>
    <div class="content" style="background-color: NavajoWhite;">Hi! I am content</div>
    <div class="content" style="background-color: Chartreuse;">Hi! I am content.. Very loooong-loooong content.. Too many words. Too many.. More and more and more... And even more for you! Believe me, I will grab all 100% of the container DIV</div>
    <div class="content" style="background-color: Aquamarine;">Hi! I am a last content</div>
</div>


.集装箱{
宽度：960px；
}
.内容{
浮动：左；
最小宽度：480px；
}
你好我很满意
你好我很满意
你好我很满足。。非常有趣的内容。。太多的话。太多了越来越多。。。对你来说更是如此！相信我，我会抓住集装箱部门100%的股份
你好我是最后一个内容

谢谢。
使用flexbox：


.container{
边缘底部：20px；
宽度：960px；
显示器：flex；
柔性包装：包装；
}
.内容{
/*弹性基准：50%；//在我的情况下，这是奇怪的*/
柔性生长：1；
}

你好我很满意
你好我很满足。。非常有趣的内容。。太多的话。太多了越来越多。。。对你来说更是如此！相信我，我会抓住集装箱部门100%的股份
你好我是最后一个内容
你好我很满意
你好我很满足。。非常有趣的内容。。太多的话。太多了越来越多。。。对你来说更是如此！相信我，我会抓住集装箱部门100%的股份
你好我是最后一个内容
你好我是最后一个内容
嗨！非常感谢。弹性基础很奇怪。其余的工作就像一个魅力！