Html CSS3并排多栏布局的两个div的宽度

我有两个div，都有多列布局。我想让它们并排出现，但我尝试的一切（比如浮动）都会把一切搞砸。 我认为问题在于

width:auto占据所有宽度

为了更好地解释，我做了一个解释：

红色和紫色的div应该在同一条线上

结果必须是水平布局，部分为红色和紫色。
有什么建议吗？
只需将
-webkit列计数：2
添加到
.container

CSS

.container{
    height:100%;
    width:100%;
    position:relative;
    background:red;
    -webkit-column-count: 2;
}


更多信息请访问：。
您的答案由Matthew James Taylor提供：

谢谢，但列号是动态的。这是流体布局的一部分。Vucko编写的解决方案很好，但我需要红色背景（实际上它会放大，因为还有空间），以适应列，因为它们必须在滚动行中。你认为有可能吗？