关于某题左列定宽右列宽度自适应布局的学习

今天群里有人做题发了一道题,由于最近在学习flex布局,就不禁研究了起来...
题目如下:

已知HTML结构如下,以下哪些CSS可以实现左列定宽(100px)右列宽度自适应的布局?

<div class="parent">
    <div class="left">左列</div>
    <div class="right">右列</div>
</div>

(A).parent{display:flex;}.left{width:100px;}.right{flex:1;}
(B).parent{overflow:hidden;}.left{float:left;width:100px;}.right{overflow:hidden;}
(C).parent{display:flex;}.left{width:100px;}.right{flex:auto;}
(D).parent{overflow:hidden;}.left{float:left;width:100px;}.right{float:right;width:100%;}

A选项:
http://jsfiddle.net/thewindsw...
B选项:
http://jsfiddle.net/thewindsw...
C选项:
http://jsfiddle.net/thewindsw...
D选项:
http://jsfiddle.net/thewindsw...

全部都试过一边了,首先是左列定宽的条件,这个条件在平时看其实ABC都似乎没什么问题.起码在我们大屏时看起来毫无问题.
但是在A,C选项的flex布局中当我们屏幕变小直到小于100px(定宽)+右边容器内容宽度时,我们就发现定宽的.left开始缩小了.

http://jsbin.com/fafosu/32/ed...

而B选项中定宽左列将保持100px,知道将右边挤压到消失.
D选项则是没什么好解释的了.

那怎么让A,C选项获得和B一样的效果呢?

那就是使用flex-shirink属性了
该属性定义了缩小比例,默认值为1,不可为负值.
在flex属性中顺序为:flex:flex-grow flex-shirink flex-basis;
我们让.left的flex-shirink:0,就可以保证.left不会因为剩余空间不足而被缩小了.
关于flex-shirink属性中容易理解的文章http://zhoon.github.io/css3/2...
至于关于数值不同导致压缩的不同程序上述文章也有所介绍,大家可以去看一下.

至于题目到底该选什么...

我也是不知道的...
有人知道正确答案么