CSS: hide element when container too narrow to let it be seen in its entirety

Question

Suppose I have an outer container of unknown fixed width, and an inner element, like so:

<div id="outer"><div id="inner">hide me when #outer is too small</div></div>

Is there a way I can make #inner entirely hidden (not just clipped) when #outer is not wide enough to show it in its entirety using pure CSS?

Answer 1

This is possible without JS through floats and adding a helper inner element:

<div class="outer">
  <div class="helper"></div>
  <div class="inner">hide me when .outer is too small</div>
</div>

and css:

.outer {
  overflow: hidden;
}

.helper {
  width: 1px;
  height: 100%;
  float: left;
}

.inner {
  float: left;
}

The inner element will now wrap under the helper if it doesn't fit within the width of the outer element, which with .helper having height: 100% and .outer having overflow: hidden results in the inner element not being visible.

You could remove the 1px helper width by using width: 0.01px instead, but I'm not sure if that runs into browser compatibility issues.