title: css - overflow: hidden in div nested inside display: table-cell
body: <p>I've got a problem with overflow in a div nested inside another div which has display: table-cell style. I'm not sure why content from #left-wrapper is not cropped (hidden) when it exceeds height of #left-wrapper. Thanks in advance for any advices. Fiddle link: <a href="http://jsfiddle.net/bpbHY/1/" rel="nofollow">http://jsfiddle.net/bpbHY/1/</a>  </p>
  
  <p>Here's my markup:</p>
  
  <pre><code>&lt;div id="wrapper"&gt;
      &lt;div id="left"&gt;
          &lt;div id="left-wrapper"&gt;
              &lt;ul&gt;
                  &lt;li&gt;Menu item&lt;/li&gt;
                  &lt;li&gt;Menu item&lt;/li&gt;
                  &lt;li&gt;Menu item&lt;/li&gt;
                  &lt;li&gt;Menu item&lt;/li&gt;
                  &lt;li&gt;Menu item&lt;/li&gt;
                  &lt;li&gt;Menu item&lt;/li&gt;
                  &lt;li&gt;Menu item&lt;/li&gt;
                  &lt;li&gt;Menu item&lt;/li&gt;
                  &lt;li&gt;Menu item&lt;/li&gt;
                  &lt;li&gt;Menu item&lt;/li&gt;
                  &lt;li&gt;Menu item&lt;/li&gt;
                  &lt;li&gt;Menu item&lt;/li&gt;
                  &lt;li&gt;Menu item&lt;/li&gt;
                  &lt;li&gt;Menu item&lt;/li&gt;
                  &lt;li&gt;Menu item&lt;/li&gt;
                  &lt;li&gt;Menu item&lt;/li&gt;
                  &lt;li&gt;Menu item&lt;/li&gt;
                  &lt;li&gt;Menu item&lt;/li&gt;
                  &lt;li&gt;Menu item&lt;/li&gt;
                  &lt;li&gt;Menu item &lt;/li&gt;
              &lt;ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="center"&gt;Center content&lt;/div&gt;
      &lt;div id="right"&gt;right&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#wrapper {
      display:table;
      width:100%;
      height:100%;
  }
  #wrapper &gt; div {
      display:table-cell;
      height:100%;
  }
  #left {
      width:70px;
      min-width:80px;
      height: 100%;
      background-color:pink;
  }
  
  #left-wrapper {
      overflow: hidden;
      height: 100%;
  }
  
  #center {
      background-color:green;
      min-width:200px;
  }
  #right {
      width:50px;
      min-width:50px;
      background-color:red;
  }
  li {
      line-height: 80px;
  }
  body, html {
      width:100%;
      height:100%;
  }
  </code></pre>