How to specify a flex item to be of certain minimum width?

You can use flex-basis and the flex-shrink properties.

The CSS flex-basis property specifies the flex basis which is the initial main size of a flex item. The property determines the size of the content-box unless specified otherwise using box-sizing.

Change your .marker as follows:

.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>

Alternatively you could continue using width: 2em and use just this flex-shorthand:

.marker
{
    flex: 0 0 auto;
}

The problems you are experiencing are caused by the default values of the flex property. Each child of a flex-container is becoming a flex item with: flex-grow:1; flex-shrink: 1; flex-basis: 0%; (See here for more info).

This properties allows your flex item to shrink, which is not wanted in your implementation.