css 2列レイアウト、親コンテナの幅が固定されず、左側の幅が固定され、右側のサブ要素の幅が適応される複数の実装方法

cssの2列レイアウトは普段の仕事でよく使われるもので、実現の仕方もいろいろあり、あまり話さずに直接コードをつける.
1.左のサブエレメント幅が固定され、右のサブエレメントoverflow:hidden;

.left{width: 100px;height:40px;}.right{overflow: hidden;}

2.親コンテナposition:relative,左辺サブエレメント幅固定position:absolute,右辺サブエレメントmargin-left:左の幅(左の幅+左と右の隙間);

.box{position: relative}.left{width: 100px;height:40px;position: absolute;top:0;left:0;}

.right{height:40px;margin-left:60px;}

3.親コンテナdisplay:table、左辺サブエレメント幅固定、右サブエレメントdisplay:table-cell;

.box{display: table;}.left{width: 100px;height:40px;}.right{display: table-cell;height:40px;}

4.flexレイアウト、互換性があまりよくありません;

.box{display: flex;}.left{width: 100px;height:40px;}.right{flex:1;height:40px;}