如何实现Class B占据全部可用空间且不覆盖左上角的div？

需要页面左上角保留一个独立Div，同时让Class B的Div占据剩余所有可用空间，避免Class B覆盖左上角Div，以下是几种可靠的实现方案：

方案一：Flexbox布局（推荐） #

利用Flexbox的空间分配特性，父容器设为flex，左上角Div保持自身尺寸，Class B通过flex:1抢占剩余空间。

<div class="container">
  <div class="top-left">左上角Div</div>
  <div class="class-b">Class B 填充剩余空间</div>
</div>

.container {
  display: flex;
  /* 若需要垂直布局，改为flex-direction: column; */
  width: 100vw;
  height: 100vh;
}

.top-left {
  width: 200px; /* 自定义宽度 */
  height: 150px; /* 自定义高度 */
  background: #f0f0f0;
  margin-right: 10px; /* 可选：添加间距 */
}

.class-b {
  flex: 1; /* 占据所有剩余空间 */
  background: #e0e0e0;
}

Flexbox会自动处理空间分配，Class B绝不会覆盖左上角Div，布局简洁且适配各种屏幕。

方案二：Grid布局 #

通过Grid划分布局区域，左上角Div占指定单元格，Class B填充剩余区域。

<div class="container">
  <div class="top-left">左上角Div</div>
  <div class="class-b">Class B 填充剩余空间</div>
</div>

.container {
  display: grid;
  grid-template-columns: auto 1fr; /* 第一列适配左上角Div宽度，第二列占剩余 */
  grid-template-rows: 1fr;
  width: 100vw;
  height: 100vh;
  gap: 10px; /* 可选：添加间距 */
}

.top-left {
  background: #f0f0f0;
  width: 200px; /* 自定义宽度 */
  height: 150px; /* 自定义高度 */
}

.class-b {
  background: #e0e0e0;
}

方案三：传统布局（仅兼容旧浏览器） #

手动给Class B设置margin，避开左上角Div的位置，这种方式需要手动计算尺寸，维护性差：

<div class="top-left">左上角Div</div>
<div class="class-b">Class B 填充剩余空间</div>

.top-left {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 150px;
  background: #f0f0f0;
}

.class-b {
  margin-left: 210px; /* 左上角Div宽度 + 间距 */
  width: calc(100% - 210px);
  height: 100vh;
  background: #e0e0e0;
}

内容的提问来源于stack exchange，提问作者Lucas Guilleminot