How to set the content area of admin panel to occupy the remaining width

Question

I have this html, a simple skeleton for admin panel:

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>

From the code above, I set .leftpane to have a width of 250px. How do I set the .rightpane to occupy the remaining width?

Using width: 87%; works on my laptop width with a 1900px resolution.

Any ideas?

I work on admin panel before but with css framework, which is not in this case.

as a side note, you need to consider the related question you get while writing yours .. they are aslo visible in the right side of this question actually .. 2 of these questions answer perfectly yours — Temani Afif, Sep 03 '18 at 12:08

score 2 · Answer 1 · answered Sep 03 '18 at 11:21

You can use flex-grow:1; on the right pane and remove the width:

.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>

score 0 · Answer 2 · answered Sep 03 '18 at 11:22

0

You can use either:

.rightpane { flex-grow: 1; }

Or the old school:

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

answered Sep 03 '18 at 11:22

ThS

4,597
2
15
27

score 0 · Answer 3 · answered Sep 03 '18 at 11:37

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>

How to set the content area of admin panel to occupy the remaining width

3 Answers3