CSS Flexbox，其中一个组件返回 TopBar 和 SideBar，另一个组件返回主要内容

Question

我无法在弹性盒布局中将主要内容放在侧边栏旁边。我的 TopBar 和 SideBar 组件合并为一个组件，因此它们在单个父 div 中返回。有没有使用 CSS flexbox 的解决方案还是我必须使用网格？

这基本上就是返回的方式：

<div style="display: flex; flex-wrap: wrap;">
  <div id="ParentNav">
    <div style="width: 100%; height: 48px; background-color: blue;">TopBar</div>
    <div style="width: 256px; min-height: calc(100vh - 48px); background-color: grey;">SideBar</div>
  </div>
  <div style="flex-grow: 1; background-color: gold;">Main content</div>
</div>

这是我想在视觉上实现的，但我无法单独返回TopBar和SideBar。

<div style="display: flex; flex-wrap: wrap;">
  <div style="width: 100%; height: 48px; background-color: blue;">TopBar</div>
  <div style="width: 256px; min-height: calc(100vh - 48px); background-color: grey;">SideBar</div>
  <div style="flex-grow: 1; background-color: gold;">Main content</div>
</div>

Answer 1

如果你不能修改html...

我认为可以将顶部栏的位置设置为绝对位置，并通过将边距设置为与导航栏顶部的顶部栏（主要内容）一样高来匹配它。使用网格、柔性很难将其从结构中拉出来。

只要风格可以自由运用。

方法1

绝对仓位和保证金

.wrapper {
  position: relative;
}

.top-bar {
  position: absolute;
}

.side-bar {
  margin-top: 48px;
}

.main-content {
  margin-top: 48px;
}

<div class="wrapper" style="display: flex; flex-wrap: wrap;">
  <div id="ParentNav">
    <div class="top-bar" style="width: 100%; height: 48px; background-color: blue;">TopBar</div>
    <div class="side-bar" style="width: 256px; min-height: calc(100vh - 48px); background-color: grey;">SideBar</div>
  </div>
  <div class="main-content" style="flex-grow: 1; background-color: gold;">Main content</div>
</div>

方法2

使用网格

.wrapper {
  display: grid;
  grid-template-columns: 256px 1fr;
  grid-template-rows: 48px 1fr;
  height: 100vh;
}

.wrapper>#ParentNav {
  display: contents;
}

.wrapper>#ParentNav>.top-bar {
  grid-column-start: 1;
  grid-column-end: -1;
  grid-row: 1;
}

.wrapper>#ParentNav>.side-bar {
  grid-column: 1;
  grid-row: 2;
}

.wrapper>.main-content {
  grid-column: 2;
  grid-row: 2;
}

<div class="wrapper">
  <div id="ParentNav">
    <div class="top-bar" style="width: 100%; height: 48px; background-color: blue;">TopBar</div>
    <div class="side-bar" style="width: 256px; min-height: calc(100vh - 48px); background-color: grey;">SideBar</div>
  </div>
  <div class="main-content" style="flex-grow: 1; background-color: gold;">Main content</div>
</div>