Html 使一个flex项目固定宽度，且其同级项目大小相同

我有四个列表项，其中三个保持不变，另一个保持300px

我的HTML:

   <ul class="test">
      <li class="desc">Test description</li>
      <li class="test">Test</li>
      <li class="test">Test</li>
      <li class="test">Test</li>
    </ul>

      ul.test {
        flex: 1 0 auto;
        flex-direction: row;
        display: flex;
      }

      li.desc{
        width: 300px;
      }

      li.test{
        background: green;
        flex: 1 0 auto
      }

我希望第一个li的宽度为300px，然后其他三个的尺寸相同。

ul.test{
显示器：flex；
填充：0；
列表样式：无；
}
李德思克{
宽度：300px；
弹性收缩：0；/*禁用默认收缩行为*/
背景颜色：橙色；
}
李氏试验{
flex:1；/*在项目之间均匀分配可用空间*/
背景：浅绿色；
}
li{右边框：1px纯黑；}

试验说明
测试
测试
测试

嗨，Michael，我增加了一个字段中的文本，而框的宽度也增加了。如何使右侧的三个li保持相同的大小？请在这三个项目上尝试此操作：

flex:0 0 calc（33%-100px）将每个项目设置为容器中空间的1/3，减去固定同级的1/3。谢谢。我不明白你为什么要把min width设置为0？我在你的plunkr演示中发布了一个带有解释的链接。给你：谢谢。让我一天都很愉快