html 左定宽.右自适应.左边文字根据右边高度居中（水平和垂直）

      需求：如下图。左边文字居中显示，高度自适应右边。

 

 解决：      

<div class="box">
	<div class="left">
		<p class="left-p">左边文字</p>
	</div>
	<div class="right"></div>
</div>

.box{
	width: 200px;
	background-color: black;
	position:relative;
}
.left{
	position:absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 100px;
	background-color: #f6f9fb;

	display: flex;
	flex-direction: column;
	justify-content: center;
}
.left-p{
	width: 100%;
        text-align: center;
}
.right{
	background-color: #409EFF;
	height: 200px;
        margin-left: 100px;
}

回顾失败：左定宽，右自适应的时候用的是浮动（如以下代码），结果为如下显