如何将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简介，以获得良好的解释。

Answer 2

这样的事情？

我已经使用display:flex让两个div很好地排列，只有内部盒子需要浮动

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