title: Expand div with "display: table-cell" on click?
body: <p>I have a series of components on my page:</p>
  
  <ul>
  <li>I want them all to be at least <code>150px</code> tall.</li>
  <li>If they are not <code>150px</code> tall, I want to vertically center their text.</li>
  <li>If they are more than <code>150px</code> I want to cut off the text at <code>150px</code>
  and have a <kbd>show more</kbd> button expand it if desired.</li>
  </ul>
  
  <p>Right now, the first situation, where they are not <code>150px</code> tall works fine, the text is centered. The problem is I can not get components with <code>height &gt; 150px</code> to cut off their content.</p>
  
  <p>I am trying to do this without jQuery.</p>
  
  <p><a href="http://codepen.io/peteTalksWeb/pen/GpRNRa" rel="nofollow">Here is a codepen demonstrating the issue.</a></p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>  &lt;div class="containerDiv"&gt;
  &lt;div id="content1" class="contentDiv"&gt;
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    &lt;br /&gt;
    &lt;button class="showMoreButton" onclick="showMore()"&gt;Show More&lt;/button&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;br /&gt;
  &lt;div class="containerDiv"&gt;
    &lt;div id="content2" class="contentDiv"&gt;
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    &lt;br /&gt;
      &lt;button class="showMoreButton" onclick="showMore()"&gt;Show More&lt;/button&gt;
    &lt;/div&gt;
    &lt;br /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.containerDiv {
    display: table;
    min-height: 150px;
    width: 400px;
  }
  .contentDiv {
    display: table-cell;
    max-height: 150px;
    overflow: hidden;
    vertical-align: middle;
  }
  .showMoreButton {
    display: none;
  }
  </code></pre>
  
  <p><strong>JS:</strong></p>
  
  <pre><code>var contentDivs = document.getElementsByClassName("contentDiv");
  for(var i = 0; i &lt; contentDivs.length; i++) {
    if(contentDivs[i].offsetHeight &gt; 150) {
      contentDivs[i].getElementsByTagName("button")[0].style.display = "inline-block";
    }
  }
  
  function showMore() {
    console.log(event.path[1].id);
    document.getElementById(event.path[1].id).style.maxHeight = "none";
  }
  </code></pre>