JSFiddle - React, Tailwind, and code Playground

HTML

<body>

    <div class='widget'>
    
        <div class='header'>
            header
        </div>

        <div class='content' style="height: 100%">
            <div class='stuff'>stuff</div>
        </div>

        <div class='footer'>
            footer
        </div>

    </div>

</body>

CSS

html, body {
	margin: 0;
	padding: 0;
	font-size: 14px;
	font-family: sans-serif;
    text-align: center;
}


.widget {
	display: flex;
    display: -webkit-flex;
	flex-direction: column;
    -webkit-flex-direction: column;

	margin: 10px auto;
	height: 400px;
	width: 200px;
	border: 10px solid black;
}


.widget > .header {
	height: 50px;
	flex: 0 0 auto;
    -webkit-flex: 0 0 auto;

	background: orange;
}


.widget > .content {
    /* Setting flex-basis to 'auto' or '100%' works in Firefox
       so the "stuff" <div> takes all the height of .content */
	flex: 100 100 auto;
    -webkit-flex: 100 100 auto;
    
    /* height: 100%;  Also works in Firefox */

	background: cyan;
}


.widget > .content > .stuff {
	box-sizing: border-box;
	height: 100%;
	width: 50%;
	margin-left: 0;
	border: 4px dotted white;
	background-color: blue;
    color: white;
}


.widget > .footer {
	height: 50px;
	flex: 0 0 auto;
    -webkit-flex: 0 0 auto;

	background: red;
}