flex左侧固定，右侧自适应详细：

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="utf-8">  
<style>  
.parent{
  height:500px;  
  border:1px solid #222;  
  display:flex; 
}  
.stable{  
  width:200px;/*固定宽度*/  
  border:1px solid  #ccc;  
  margin:10px;  
  /*flex-shrink: 0;*/
}  
.change{  
  flex:1;/*这里设置为占比1，填充满剩余空间*/  
  border:1px solid #ff4400;  
  margin:10px;  
  white-space: nowrap;
}  
</style>  
</head>  
<body>  
  <div class="parent">  
    <div class="stable">stable 固定宽度200px</div>  
    <div class="change">changeable 可变宽度chang度changeable 可变宽度chang度changeable 可变宽度chang度changeable 可变宽度chang度changeable 可变宽度chang度</div>  
  </div>  
</body>  
</html>

详细：

flex-shrink，默认值是1，修改为0，就不会因为右侧内容太多，被压缩。

flex默认为0 1 auto
flex:1是缩写。下面这两行是等同的。
.item {flex: 1;}
.item {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0%;
}