Flexbox example : flexible header - content takes remaining height and has scroll bar

dabblet.css

/**
 * Flexbox example : flexible header - content takes remaining height and has scroll bar
 *
 */
#page  {

	position: relative;
	display: flex;
	background: red;
	height: 219px;
	width: 434px;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: center;
	align-content: center;
	
}

#page > div {
	
	width: 100%;
	
}
#page > div:first-child {

	background: purple;
	flex: 1v;
}

#page > div:last-child {
	
	background: yellow;
	opacity: 0.8;
	flex: 1;
	overflow: auto;
	min-height: 0;
	
}

dabblet.html

<div id="page"><div><h1>flex item 1  item 1 flex item 1 flex item 1 
</h1></div><div>"Vu l'article 55 du décret du 17 mars 1967, ensemble les articles L. 114-1, L. 242-1, et A. 243-1 du code des assurances ;

Attendu, selon l'arrêt attaqué (Aix-en-Provence, 23 septembre 2010), que la société civile immobilière Beau de Rochas (SCI), assurée selon police dommages-ouvrage par la société La Préservatrice foncière assurances (PFA), aux droits de laquelle vient la société Allianz IARD, a fait édifier un bâtiment à usage de commerces et bureaux, vendu sous le régime de la copropriété après réception sans réserve le 15 avril 1990 ; qu'à la suite d'une déclaration de sinistre le 28 octobre 2004, le syndicat des copropriétaires (le syndicat) a informé l'assureur le 30 décembre 2004, de son intention d'engager les travaux nécessaires à la réparation des dommages subis et l'a assigné, le 30 septembre 2005 en indemnisation des désordres, sur le fondement des sanctions attachées à l'inobservation de la procédure d'indemnisation ;</div></div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"70","seethrough":"","prefixfree":"1","page":"css"}