【CSS】2段カラム、片側は横幅を固定（可変レイアウト）

<div class="content-body">
<div class="content-left"><span>左</span></div>
<div class="content-right"><span>右</span></div>
</div>

.content-body{
 
	/*display:flexを設定、初期値*/
	display:flex;
	flex-direction:row;
	flex-wrap:nowrap;
	justify-content:flex-start;
	align-items:stretch;
	align-content:stretch;
 
	/*表示用*/
	background-color:#ccc;
	width:100%;
	min-height:300px;
}
 
	/*左側*/
.content-left{
	background-color:#999;
	min-height:300px;
}
 
	/*右側*/
.content-right{
	background-color:#666;
	min-height:300px;
}

	/*左側*/
.content-left{
 
	/*右側のボックスの横幅を全体から引いたサイズを左側に割り当てる*/
	width:calc(100% - 200px);
 
	background-color:#999;
	min-height:300px;
}

	/*左側*/
.content-left{
 
	/*flex-grow:1、flex-shrink:1、flex-basis:autoを指定*/
	flex:1 1 auto;
 
	background-color:#999;
	min-height:300px;
}
 
	/*右側*/
.content-right{
 
	/*flex-grow:0、flex-shrink:0、flex-basis:200pxを指定*/
	flex:0 0 200px;
 
	background-color:#666;
	min-height:300px;
}

	/*左側*/
.content-left{
 
	/*flex:1とするだけ*/
	/*下記はflex-grow:1;flex-shrink:1;flex-basis:0;をそれぞれ指定したのとまったく同じです*/
	flex:1;
 
	background-color:#999;
	min-height:300px;
}
 
	/*右側*/
.content-right{
 
	/*固定したいwidthを200px指定*/
	width:200px;
 
	background-color:#666;
	min-height:300px;
}