Css中实现一个盒子固定宽度，另一个盒子宽度自适应的方法

网上方法很多，个人认为以下两种思想是最为常用的。
一种是让第一个盒子脱离文档流，第二个盒子离左边有一定距离。
第二种方法是使用flex布局，不过有一些兼容性问题。
直接上代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<style type="text/css">
	.div1{background: red;}
	.div2{background: yellow;}

	.way1>.div1{float:left; 200px;height:100px;}
	.way1>.div2{margin-left: 200px;height: 100px;}

	.way2{display: flex;}
	.way2>.div1{ 200px;height: 100px;}
	.way2>.div2{flex: 1;height: 100px;}

	.way3{position: relative;}
	.way3>.div1{ 200px;height:100px;display: inline-block;}
	.way3>.div2{height: 100px;position:absolute;left: 200px;right:0;display: inline-block;}
</style>
<script>
</script>
<body>
	<!-- 两栏式布局，一方固定，一方自适应 -->
	<!-- 方法1 浮动布局和margin-left,利用了块级元素占满一行的特性-->
	<h1>方法2</h1>
	<div class="way1">
		<div class="div1"></div>
		<div class="div2"></div>
	</div>

	<!-- 方法2 flex布局-->
	<h1>方法2</h1>
	<div class="way2">
		<div class="div1"></div>
		<div class="div2"></div>
	</div>

	<!-- 方法3 display+相对定位绝对定位方法-->
	<h1>方法3</h1>
	<div class="way3">
		<div class="div1"></div>
		<div class="div2"></div>
	</div>		
</body>
</html>