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 overflow: hidden it will only hide the overflowed portion of that item, not the entire item.
Consider the following:
<nav id="top-nav"><div id="main-nav-container"><div class="menu"><ul><li><a href="/">Item 1</a></li><li><a href="/">Item 2</a></li><li><a href="/">Item 3</a></li><li><a href="/">Item 4</a></li></ul></div><div class="menu"><ul><li><a href="/">Other 1</a></li><li><a href="/">Other 2</a></li></ul></div></div></nav>CSS:
#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 > 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;}If the window shrinks I want "Item 4" to hide as soon as it starts to become overlapped by "Other 1".
Once I achieve this I'd also need a selector that can target those that are hidden.