title: Restrict height of div marked with display:table-cell?
body: <p><strong>Problem:</strong> </p>
  
  <p>I need to use <code>display:table</code> (in the parent div) and <code>display:table-cell</code> (in the contained div) to center some content vertically.  This is working except when the content overflows vertically.  I want to restrict the height so that a scrollbar appears if there's any vertical overflow.  </p>
  
  <p><strong>Fiddle:</strong> </p>
  
  <p><a href="http://jsfiddle.net/PTSkR/110/" rel="nofollow">http://jsfiddle.net/PTSkR/110/</a></p>
  
  <p>(Note that in the output, the div is expanded vertically despite me setting the height to 160px)</p>
  
  <p><strong>CSS:</strong> </p>
  
  <pre><code>side-study-box {
      background-color: white;
      color: black;
      border: 1px solid #3D6AA2;
      text-align: center;
      height: 160px !important;
      display: table !important;
      margin: 0px !important;
      margin-left: -1px !important;
      position: relative;
      overflow-y: scroll;
      width: 100%;
  }
  
      .side-study-box .side-box-content {
          width: calc(100%);
          height: 160px !important;
          float: right;
          display: table;
          overflow-y: scroll;
      }
  
      .side-study-box .text-content-saved {
          width: 100% !important;
          font-size: 24px;
          display: table-cell;
          vertical-align: middle;
          text-align: center;
          height: 160px !important;
          max-height: 160px !important;
          background-color: white;
          padding: 0px !important;
          margin: 0px !important;
          font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
          border: 0px !important;
          overflow-y: scroll;
      }
  </code></pre>