Edit in JSFiddle

<div class="container elem">
    <span class="label begin"> &lt;div class="container"&gt; </span>
    
   <div class="elem elem-orange initial">
   <span class="label begin"> &lt;div class="initial"&gt; </span>
       <p>空间足够的时候，我的宽度是200px，如果空间不足，我会变窄到100px，但不会再窄了。</p>
       <span class="label end"> &lt;/div&gt; </span>
   </div>
    
    <div class="elem elem-orange none">
    <span class="label begin"> &lt;div class="none"&gt; </span>
        <p>无论窗口如何变化，我的宽度一直是200px。。</p>
        <span class="label end"> &lt;/div&gt; </span>
   </div>
    
    <div class="elem elem-orange flex1">
        <span class="label begin"> &lt;div class="flex1"&gt; </span>
    <p>我会占满剩余宽度的1/3。</p>
        <span class="label end"> &lt;/div&gt; </span>
   </div>
    
    <div class="elem elem-orange flex2">
        <span class="label begin"> &lt;div class="flex2"&gt; </span>
    <p>我会占满剩余宽度的2/3。</p>
        <span class="label end"> &lt;/div&gt; </span>
   </div>
</div>

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
.elem{
    border:solid #6AC5AC 3px;
    position:relative;
}
.elem-red {
    border: solid #D64078 3px;
}
.elem-orange {
    border: solid #FDC72F 3px;
}
.elem-green {
    border: solid #96C02E 3px;
}
.label{
    position:absolute;
    background-color:#6AC5AC;
    line-height:1em;
    padding:3px;
}
.elem-red > .label{
    background-color:#D64078;
}
.elem-orange > .label{
    background-color:#FDC72F;
}
.begin{
    left:0;
    top:0;
}
.end{
    right:0;
    bottom:0;
}
p{
    margin:2em 0;
    display:block;
}

.container {
  display: -webkit-flex;
  display: flex;
}
.initial {
  -webkit-flex: initial;
          flex: initial;
  width: 200px;
  min-width: 100px;
}
.none {
  -webkit-flex: none;
          flex: none;
  width: 200px;
}
.flex1 {
  -webkit-flex: 1;
          flex: 1;
}
.flex2 {
  -webkit-flex: 2;
          flex: 2;
}