title: How can I hide flex items when it overflows the flex parent?
body: <p>Supposing that I have a flexbox container where the content may overflow the parent container. What I would like is that if any item gets larger than the container by any amount that it be hidden. If I set <code>overflow: hidden</code> it will only hide the overflowed portion of that item, not the entire item.</p>
  
  <p>Consider the following:</p>
  
  <pre><code>&lt;nav id="top-nav"&gt;
      &lt;div id="main-nav-container"&gt;
          &lt;div class="menu"&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="/"&gt;Item 1&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="/"&gt;Item 2&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="/"&gt;Item 3&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="/"&gt;Item 4&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
          &lt;div class="menu"&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="/"&gt;Other 1&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="/"&gt;Other 2&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre class="lang-css prettyprint-override"><code>#top-nav, #top-nav div.menu ul li {
    background-color: #444;
  }
  
  #main-nav-container {
    margin: 0 auto;
    max-width: 1200px;
    padding: 0 40px;
    display: -webkit-inline-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: justify;
    -moz-justify-content: -moz-space-between;
    -ms-justify-content: -ms-space-between;
    justify-content: space-between;
  }
  
  #top-nav div.menu {
    -webkit-flex: 1;
    display: -webkit-inline-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
  }
  
  #top-nav div.menu:last-child {
    display: -webkit-inline-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: flex-end;
    -webkit-flex-direction: row;
    flex-direction: row;
    justify-content: flex-end;
  }
  
  #top-nav div.menu,
  #top-nav div.menu ul {
    text-align: left;
    alignment-baseline: baseline;
    margin: 0;
    padding: 0;
  }
  #top-nav div.menu ul {
    list-style: none;
  }
  #top-nav div.menu &gt; ul {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    white-space: nowrap;
  }
  #top-nav div.menu li {
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-shrink: 0;
    flex-shrink: 0;
    margin: 0
    position: relative;
    font-size: 1.1em;
    cursor: pointer;
  }
  #top-nav div.menu ul li a {
    color: #E6E6E6;
    text-decoration: none;
    display: block;
    padding: 7px;
  }
  </code></pre>
  
  <p>If the window shrinks I want "Item 4" to hide as soon as it starts to become overlapped by "Other 1".</p>
  
  <p>Once I achieve this I'd also need a selector that can target those that are hidden.</p>
  
  <p><a href="http://jsfiddle.net/373AG/" rel="noreferrer">jsfiddle setup here</a></p>