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

Question

我有一个包含两个子元素的容器 div (不能 float )。我希望子元素位于相对的两侧 - 第一个在左边，第二个在右边。在 100% 浏览器宽度上，子级摘要宽度小于容器，但在更大的比例下不是，所以容器也应该更大。如何设置容器在幸灾乐祸的 child 成长时成长？

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 以获得很好的解释。