css – 如何指定弹性项目具有一定的最小宽度？

我正在尝试使用display：flex,但是一些内联块永远不应该缩小.我不知道如何做到这一点.

这是我的情况的一个重演：

.marker {
  width: 2em;
  height: 2em;
  BACkground-color: #cef;
  border: 1px solid gray;
  margin-right: 5px;
}

label {
  display: flex;
  align-items: flex-start;
}

<div class="container" style="width: 200px; border: 1px solid #ccc; padding: 10px;">
  <p>The blue boxes should be 2em wide!</p>
  <label>
    <span class="marker"></span>
    <span class="text">Some rather long text which is the whole reason for using flexbox.</span>    
  </label> 
  <label>
    <span class="marker"></span>
    <span class="text">Short text.</span>    
  </label> 
</div>

问题是.marker的宽度不是2em,而是相当窄.

我已经阅读了css-tricks’ helpful Guide to Flexbox.唯一看似有用的属性是flex-shrink(我期待一些“永不缩小”的属性),但是没有办法将它用于我的目的.我已经撇去了the MDN flex pages,但也找不到解决办法.最后,我还仔细阅读了Stack Overflow在撰写此问题时给出的“重复”建议,但也没有解决方案.

如何指定弹性项目永远不会缩小到超过某个最小宽度？

.marker {
  flex: 0 0 2em;
  height: 2em;
  BACkground-color: #cef;
  border: 1px solid gray;
}

label {
  display: flex;
  align-items: flex-start;
}

<div class="container" style="width: 200px; border: 1px solid #ccc; padding: 10px;">
  <p>The blue box should be 2em wide!</p>
  <label>
    <span class="marker"></span>
    <span class="text">Some rather long text which is the whole reason for using flexbox.</span>    
  </label>  
</div>

.marker
{
    flex: 0 0 auto;
}