如何使自动换行列的宽度扩展到其内容

Question

如何确保自动换行的弹性框将其宽度扩展到内容？

• 使用css属性进行内联弯曲，对齐内容，对齐项目，对齐内容，弯曲增长，弯曲收缩，弯曲基础的处理。我认为问题是flex-basis: auto，它的行为与预期不符，尝试过flex-basis: content根本没有效果。
• 在flexbox上阅读a guide to flexbox和其他在线教程
• 大多数stactoverflow flexbox问题仅具有有限的内容，但是在这里，我有很多内容要显示，所以...

.masterbox {
  
  height: 200px;
  width: 400px;
  overflow-x: auto;
  overflow-y: hidden;
  
  display: flex;
  flex-flow: row nowrap;
  /* justify-content: flex-start; */
  /* align-items: stretch; */

}
.box {
  
  flex: 1 0 auto /* content */ ;
  
  display: flex;
  flex-flow: column wrap;
  
  /* justify-content: flex-start; */
  /* align-items: stretch; */
  /* align-content: flex-start; */
  
}

.masterbox {border: 1px solid red;}
.box       {border: 1px solid green;}
.box > div {border: 1px solid rgba(0,0,255,0.2);}

<div class="masterbox">
  <div class="box">
    <div>somethindsg</div>
    <div>something</div>
    <div>something</div>
    <div>something</div>
    <div>something</div>
    <div>something</div>
    <div>something</div>
    <div>something</div>
    <div>something</div>
    <div>something</div>
    <div>something</div>
    <div>something</div>
    <div>something</div>
    <div>something</div>
    <div>something</div>
    <div>somethingsg</div>
  </div>
  <div class="box">
    <div>something</div>
    <div>something</div>
    <div>something</div>
    <div>something</div>
    <div>something</div>
    <div>something</div>
    <div>something</div>
    <div>something</div>
    <div>something</div>
    <div>something</div>
    <div>something</div>
    <div>something</div>
    <div>something</div>
    <div>something</div>
    <div>something</div>
    <div>something</div>
  </div>
  <div class="box">
    <div>something</div>
    <div>something</div>
    <div>something</div>
    <div>something</div>
    <div>something</div>
    <div>something</div>
    <div>something</div>
    <div>something</div>
    <div>something</div>
    <div>something</div>
    <div>something</div>
    <div>something</div>
    <div>something</div>
    <div>something</div>
    <div>something</div>
    <div>something</div>
  </div>
  <div class="box">
    <div>something</div>
    <div>something</div>
    <div>something</div>
    <div>something</div>
    <div>something</div>
    <div>something</div>
    <div>something</div>
    <div>something</div>
    <div>something</div>
    <div>something</div>
    <div>something</div>
    <div>something</div>
    <div>something</div>
    <div>something</div>
    <div>something</div>
    <div>something</div>
  </div>
</div>

我想要这个： https://i.ibb.co/3kB9fTL/flexbox.png

• 宽度和高度固定的母版箱，内容将在右侧溢出。
• 然后，我希望使用很多小组框作为自动换行的弹性框，弹性框的宽度将根据其内容而扩展。
• flexbox组没有按预期扩展，它溢出并且看起来很丑。

谢谢你们。