Setting a length (height or width) for one element minus the variable length of another, i.e. calc(x - y), where y is unknown

Question

I know we can use calc when lengths are defined:

flex-basis: calc(33.33% - 60px); left: calc(50% - 25px); height: calc(100em/5); 

But what if a length is variable?

height: calc(100% - <<header with variable height>>); 

OR

width: calc(100% - 50px - <<box with variable width>>); 

Is there a standard way to do this in CSS?

I know the overall task is possible with flexbox and tables, but I'm wondering if CSS offers a simpler method. Flexbox, tables and simple Javascript are acceptable alternatives.

height demo

width demo

Answer 1

You can use CSS tables:

.wrapper {    display: table;    width: 100%;    margin: 15px 0;  }    .horizontal.wrapper > div {    display: table-cell;    white-space: nowrap; /* Prevent line wrapping */    border: 1px solid;  }  .left { width: 100px } /* Minimum width of 100px */  .center { width: 0; }  /* Width given by contents */    .vertical.wrapper { height: 200px; }  .vertical.wrapper > div {    display: table-row;  }  .vertical.wrapper > div > span {    display: table-cell;    border: 1px solid;  }  .top    { height: 100px; } /* Minimum heigth of 100px */  .middle { height: 0; }     /* Height given by content */  .bottom { height: 100%; }  /* As tall as possible */

<div class="horizontal wrapper">    <div class="left">100px wide</div>    <div class="center">Auto width, given by contents</div>    <div class="right">Remaining space</div>  </div>  <div class="vertical wrapper">    <div class="top"><span>100px tall</span></div>    <div class="middle"><span>Auto height, given by contents</span></div>    <div class="bottom"><span>Remaining space</span></div>  </div>

The horizontal case can also be achieved with floats:

#wrapper, .right { overflow: hidden; } /* Establish BFC */  #wrapper > div { border: 1px solid; }  .left, .middle { float: left; }  .left { width: 100px }

<div id="wrapper">    <div class="left">100px</div>    <div class="middle">Auto width, given by contents</div>    <div class="right">Remaining space</div>  </div>