如何将 div 放在父 div 的相对两侧，并在缩放时相对于它们的父宽度？

Question

我有一个容器 div （不能浮动） 有两个子元素。我希望子元素位于相反的两侧 - 第一个在左边，第二个在右边。在 100% 浏览器宽度上，儿童摘要宽度小于容器，但在更大的比例上则不然，因此容器也应该更大。幸灾乐祸的孩子长大后如何设置容器成长？

UPD： 类似this 我需要所有元素在任何比例下都保持在一条线上。

 <div id="page">
     <div id="container">
         <div id="left">
           <div>first</div>
           <div>second</div>
           <div>third</div>
         </div>
         <div id="right">
            right
         </div>
      </div>
    </div>
    <style>
    #page {
      background-color: grey;
      width: 100%;
      height: 300px;
    }
    #container {
      /*this styles are needed to other parts*/
      position: relative; 
      clear: both;
      /*=====================================*/
      background-color:red;
      height: 50px;
      width: 90%;
      margin: 0 5%;
    }
    #left {
        float: left;
        background-color: blue;
    }
    #left div {
      width: 50px;
      display: inline-block;
    }
    #right{
     float: right; 
     background-color: green;
     display: block;
     max-width: 200px;
    }
    </style>

Answer 1

.container {
  display: flex;
  justify-content: space-between;
}

它应该这样做。 谷歌上 FlexBox Introduction 以获得很好的解释。

Answer 2

类似的东西？

我使用display:flex 让两个 div 很好地对齐，浮动只需要内框

https://jsfiddle.net/070rk2e1/1/