CSS布局之水平垂直布局

css 如何实现左侧固定 300px，右侧自适应的布局？两种方法
第一种 使用 flex 布局，左侧 300px，右侧 flex-grow: 1。pug 代码及 css 代码示例如下

			<style>
			.overview {
				width: 100%;
				height: 100px;
				background-color: rgb(180, 180, 207);
				display: flex;
			}
			.left {
				flex-basis: 300px;
				flex-shrink: 0;
				background-color: rgb(33, 238, 61);
			}
			.right {
				flex-grow: 1;
			}
			</style>
			
		<div class="overview">
			<div class="left">left</div>
			<div class="right">right</div>
		</div>

第二种使用Grid布局，控制容器的CSS属性就行。

<style>
.grid {
				width: 100%;
				height: 100px;
				background-color: wheat;
				display: grid;
				grid-template-columns: 300px auto;
			}
			.left1 {
				background-color: rgb(160, 28, 28);
			}</style>
			<div class="grid">
			<div class="left1">left1</div>
			<div class="right2">right2</div>
		</div>