title: Is it possible to detect if content inside a parent element is too wide to fit?
body: <p>I'm looking at a potential solution to a responsive problem.</p>
  
  <p>Firstly, I'm aware that media queries play a part in this and that I can set breakpoints and even minor breakpoints. This is something that I already do.</p>
  
  <p>However, what I want to do is a little beyond this. I would like to alter the styling on my child html when the overall width would cause the child content to wrap inside its parent, making a more dynamic solution.</p>
  
  <p>Take this example:</p>
  
  <pre><code>&lt;nav class="parent" style="width:500"&gt;
      &lt;ul class="inline-list"&gt;
          &lt;li&gt;Item 1&lt;/li&gt;
          &lt;li&gt;Item 2&lt;/li&gt;
          &lt;li&gt;Item 3&lt;/li&gt;
          &lt;li&gt;Item 4&lt;/li&gt; // uh-ho, this won't fit - wrap it!
          &lt;li&gt;Item 5&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>It represents a navigation structure. I would like to stack it when the content becomes too large. The easiest way would be to attach a class to the parent using javascript - this would allow me to stack rather than wrap, and to do it more elegantly than I could achive with just media queries.</p>
  
  <p>The question is how is it possible to detect if the contact is in fact wider than its parent? </p>