JSFiddle - React, Tailwind, and code Playground
HTML
<div id="wrapper">
<div id="navigation">
<ul id="common-links">
<li>
<a href="#">Important Link</a>
</li>
<li>
<a href="#">Important Link</a>
</li>
<li>
<a class="omittable" href="#">Omittable Link</a>
</li>
<li>
<a class="omittable" href="#">Omittable Link</a>
</li>
<li>
<a class="omittable" href="#">Omittable Link</a>
</li>
</ul>
<ul id="admin-links">
<li>
<a href="#">Important Link</a>
</li>
<li>
<a href="#">Important Link</a>
</li>
</ul>
</div>
<div id="content">
<p>Hello world.</p>
<p>This is supposed to be content.
But only thing we care is the menu (Sorry about that.)
</p>
<p>Page width decreases, some items magically disappear.<br />
Which is <strong>intended</strong>.<br />
You can do that by pulling the frame bars around.
</p>
</div>
</div>
CSS
#wrapper {
background: #eee;
width: 100%;
min-width: 450px;
max-width: 700px;
margin: 0 auto;
}
#navigation {
height: 40px;
background: #f00;
-moz-box-align: stretch;
-moz-box-orient: horizontal;
-webkit-box-align: stretch;
-webkit-box-orient: horizontal;
box-align: stretch;
box-orient: horizontal;
display: -moz-box;
display: -webkit-box;
display: box;
width: 100%;
overflow: hidden;
}
#navigation > ul {
overflow: hidden;
z-index: 990;
}
#common-links {
-moz-box-flex: 1;
-webkit-box-flex: 1;
box-flex: 1;
overflow: hidden;
}
#navigation li {
float:left;
}
#navigation li a {
padding: 10px;
display:inline-block;
background: #0c0;
outline: solid 1px #0c0;
}
#navigation a.omittable {
background: #0f0;
}