如何在以flex-direction为列和flex-wrap作为wrap的flex框中将容器宽度设置为child

Question

这是工作代码：

.container{
  display: flex;
  background-color: lightgreen;
  justify-content: center;
  alighn-item: center;
}

.child{
  margin-left: 10px;
  height: 200px;
  background-color: yellow;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.childItem{
  height: 50px;
  width: 100px;
  background-color: red;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px 0 0 10px;
}

<div class='container'>
  <div>Test</div>
  <div class='child'>
    <div class="childItem">Amounts</div>
    <div class="childItem">Amounts</div>
    <div class="childItem">Amounts</div>
    <div class="childItem">Amounts</div>
    <div class="childItem">Amounts</div>
  </div>
</div>

当前输出

预期产量

我们希望此子容器（黄色）的宽度应等于子项（红色）的元素

Answer 1

.test-container{
  background-color: lightgreen;
  padding: 20px 0px;
}
.container{
  background-color: lightgreen;
  width:300px;
  margin:auto;
}

.child{
  margin-left: 10px;
  height: 200px;
  background-color: yellow;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
}

.childItem{
  height: 50px;
  width: 100px;
  background-color: red;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px 0 0 10px;
}

<div class="test-container">
  <div class='container'>
    <div>Test</div>
    <div class='child'>
      <div class="childItem">Amounts</div>
      <div class="childItem">Amounts</div>
      <div class="childItem">Amounts</div>
      <div class="childItem">Amounts</div>
      <div class="childItem">Amounts</div>
    </div>
  </div>
</div>