Column with Expanded in HTML

Simulate a flutter layout like: Column( Text Expanded Text ) in HTML/CSS.

by David Iglesias

HTML

<div class="column">
  <p>Header 'foo'</p>
  <div id="flutter_host" class="expanded">
  <span>
  ...Flutter should be able to fill the <tt>#flutter_host</tt> element completely...
  </span>
  </div>
  <p>Footer 'foo'</p>
</div>

CSS

/* "Resets" You may already have some of these */
* { box-sizing: border-box; }
html, body {
  height: 100%;
  margin: 0; padding: 0;
}

/* Flexbox layout for column/expanded */
.column {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.expanded {
  flex: 1;
}

/* Eye candy below, not relevant to the problem. */
* { font-family: sans-serif; }
tt { font-family: monospace; font-weight: bold; }
body { border: 1px solid red; }
.column { border: 1px solid green; }
.expanded {
  display: flex;
  background: #09f;
  border: 1px solid blue;
  text-align: center;
  align-items: center;
  justify-content: center;
}