html - 如何设置管理面板的内容区域占据剩余宽度

Question

我有这个 html，一个简单的管理面板骨架：

body {margin: 0}

.adminpanel {
  display: flex;
  height: 100vh;
}

.leftpane {
  width: 250px;
  background-color: #0038a8;
}    

.rightpane {
  width: 87%;
  background-color: #ce1126;
}

<div class="adminpanel">
  <div class="leftpane">
    left
  </div>
  <div class="rightpane">
    right
  </div>
</div>

从上面的代码中，我设置.leftpane了 250px 的宽度。如何设置.rightpane以占据剩余宽度？

使用width: 87%;分辨率为 1900 像素的笔记本电脑宽度。

有任何想法吗？

我以前在管理面板上工作，但使用 css 框架，在这种情况下不是。

标签： htmlcssflexbox

Answer 1

您可以flex-grow:1;在右窗格中使用并删除宽度：

.adminpanel {
  display: flex;
  flex-direction: row;
  height: 100vh;
}

.leftpane {
  width: 250px;
  background-color: #0038a8;
}

.rightpane {
  background-color: #ce1126;
  flex-grow: 1;
}

<div class="adminpanel">
  <div class="leftpane">
    left
  </div>

  <div class="rightpane">
    right
  </div>
</div>