Css 围绕另一个div浮动后拉伸div

我有一个动态高度和30%宽度的右div。 目标是让紫色元素围绕右div浮动，并在结束后占据剩余空间。是否可以仅使用CSS来执行此操作

.container{
高度：500px；
宽度：100%；
}
黄先生{
宽度：30%；
背景：黄色；
浮动：对；
保证金：5px；
}
紫色{
背景：紫色；
高度：40px；
保证金：5px；
宽度：100%；
浮动：左；
}

这里的一些内容


这里的一些内容

如果您避免浮动紫色框，并使用

溢出：隐藏

使其浮动，那么您将得到想要的结果

基本上，浮动元素会使它们彼此清除，因为在紫色框中将宽度设置为100%。如果您将紫色框保留在文档的正常流程中，并使用块格式上下文，让它们基于右浮动元素进行重塑，您将得到结果

.container{
高度：500px；
宽度：100%；
}
黄先生{
宽度：30%；
背景：薰衣草；
浮动：对；
保证金：5px；
}
紫色{
背景：浅蓝色；
高度：40px；
保证金：5px；
溢出：隐藏；
}

这里的一些内容


这里的一些内容