根据flex-basis和children的宽度设置父宽度

Question

我试图找出一种方法，让父灵活元素的宽度由其孩子根据孩子的弹性基础属性动态设置。< / p>

例如，假设我有一个包含12个子元素的父元素（display: flex），每个子元素的宽度为100px，灵活度为25％。在这种情况下，父容器的宽度应自动设置为400px。如果我将flex-basis更新为50％，则容器宽度应更改为200px。

这一切都可能吗？

HTML

<ul class="container">
  <li class="item">1</li>
  <li class="item">2</li>
  // ...
  <li class="item">12</li>
</ul>

CSS

.container {
  list-style: none;
  background-color: #ccc;
  margin: 0;
  padding: 40px;
  display: flex;
  align-items: flex-start;
  flex-flow: row wrap;
}

.item {
  width: 100px;
  height: 120px;
  background-color: #ff0;
  flex: 1 0 25%;
}

.item:nth-child(3n) {
  background-color: #f0f;
}

.item:nth-child(3n + 1) {
  background-color: #0ff;
}

为方便起见，上述代码的here's a live version