JSFiddle - React, Tailwind, and code Playground

3 columns, left and right fixed width, middle min- and max-width

by CBroe

HTML

<div id=col1><span></span>foo bar baz</div>
<div id=col2><span></span>This needs to be at least 230 px wide, otherwise it’ll break at unexpected points.<br><br><br><br><br>*<br><br><br><br><br>*<br><br><br><br><br>*<br><br><br><br><br>*<br><br><br><br><br>*<br><br><br><br><br>*<br><br><br><br><br>*<br><br><br><br><br>*<br><br><br><br><br>*<br><br><br><br><br>*</div>
<div id=col3><span></span>foo bar baz</div>

CSS

html { height:100%; }
body { display:table; margin:auto; height:auto; height:100%; table-layout:fixed; border-top:5px solid cyan; }
div { display:table-cell; }
div span { display:block; height:5px; }
#col1, #col3 { background:red; width:5em; min-width:5em; }
#col1 span, #col3 span { width:5em; background:green; }
#col2 { background:blue; min-width:230px; max-width:500px; }
#col2 span { width:230px; background:yellow; }