防止 2 个可变宽度的浮动兄弟姐妹包裹在容器内？

Question

我遇到了浮动问题。我有两个 div，我需要始终并排，在同一行。当屏幕缩小时，它们不应该换行。一个必须向左浮动，另一个必须向右浮动。如果屏幕宽度太小而无法完全显示两个 div，则用户必须能够滚动主窗口以查看所有内容（滚动条应该在用户期望的位置，而不是“内部”滚动条）。如果两个浮动 div 不完全可见，我只希望滚动条可见——滚动条不应该不可见。

问题是，即使我将容器设置为使用white-space: none; 或overflow: visible，div 仍然会换行。

我需要 div 始终保持一致。

重要提示： 两个浮动 div 的内容的宽度是可变的；为了演示，我硬编码了一些尺寸，但这些尺寸并不总是它们的尺寸。 div 必须彼此内联，无论其内容如何。

小提琴：http://jsbin.com/yidapiriya/edit?html,css,output

标记：

  <div class="container clearfix">
    <div class="content-container">
      <!-- the width/height of this div will be variable based on content... this is just hardcoded for demo purposes -->
      <div style="width: 400px; height: 400px;"></div>
    </div>
    <div class="ads-container">
            <!-- the width/height of this div will be variable based on content... this is just hardcoded for demo purposes -->
      <div style="width: 640px; height: 480px;"></div>
    </div>
  </div>

CSS：

* {
  box-sizing: border-box;
  outline: 1px solid black;
}

.container {
  white-space: nowrap;
  width: auto;
  max-width: 1600px;
  margin: 0 auto;
  height: auto;
  padding: 1rem 3.5%;
  overflow: hidden;
}

.content-container {
  width: auto;
  white-space: normal;
  margin-top: 2.5rem;
  float: left;
  display: inline-block;
  height: 25rem;
}

.ads-container {
  width: auto;
  display: inline-block;
  float: right;
  text-align: right;
}


.clearfix{ 

}
.clearfix:before {
  content: ' ';
  display: table;
}
.clearfix:after {
  clear: both;
  content: ' ';
  display: table;
}

Answer 1

据我了解您的问题，即使窗口调整大小设置min-width: 到容器，您也需要两个 div 内联

.container {
  min-width: 1400px;
  ...
}

demo

更新

New Demo

.container {
  .....
  min-width:380px;
}

.container > div{
  display:inline-block;
  position: relative; 
  width: 50%; 
  float: left;
}

Answer 2

只需从.ads-container 和.content-container 中删除float: left 和float: right 并将overflow: auto; 设置为.container