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

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%;可以在我的笔记本电脑上使用1900px分辨率的宽度。

有什么想法吗？

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

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>

Answer 2

您可以使用：

.rightpane { flex-grow: 1; }

还是旧学校：

.rightpane { width: calc(100% - 250px); }

Answer 3

body {margin: 0}

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

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

.rightpane {
  flex-grow: 1;
  /*or width: calc(100% - 250px)     */
  background-color: #ce1126;
}

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