对齐两个 flexbox 容器的子项

Question

我需要创建两个带有子项的 flexbox 容器，第二个容器具有第一个的子项的子集，但我希望它们的宽度与上面的对齐。孩子们使用 width 和 flex 进行调整，但由于第二个容器的孩子较少，因此它们的实际宽度不匹配。看这个：https://codepen.io/anon/pen/LBgKmR

我不能只在第二个容器中放入更多项目来填充 html。我需要设置一个 flex-container 的属性来声明它们的子宽度。

这样的事情可能吗？

这里是codepen的内容：

    .flex-container {
      padding: 0;
      margin: 0;
      list-style: none;
      
      display: flex;
      width: 100%;
    }
    
    .item {
      padding: 5px;
      height: 150px;
      margin-top: 10px;
      
      line-height: 150px;
      color: white;
      font-weight: bold;
      font-size: 3em;
      text-align: center;
    }
    
    .flex-item {
      background: tomato;
      flex: 1;
    }

    <ul class="flex-container">
      <li class="item flex-item">1</li>
      <li class="item flex-item">2</li>
      <li class="item" style="background-color: green; width: 50px">3</li>
      <li class="item flex-item">4</li>
      <li class="item flex-item">5</li>
      <li class="item flex-item">6</li>
    </ul>
    
    <ul class="flex-container">
      <li class="item flex-item">a</li>
      <li class="item flex-item">b</li>
      <li class="item" style="background-color: green; width: 50px">c</li>
      <li class="item flex-item">d</li>
    </ul>

Answer 1

网格布局的grid-template-columns 是我真正想要和需要的，一种父声明子宽度的方法。