title: Rotated elements in CSS that affect their parent's height correctly
body: <p>Let's say I have a couple of columns, of which some I'd like to rotate the values of:</p>
  
  <p><a href="http://jsfiddle.net/MTyFP/1/" rel="noreferrer">http://jsfiddle.net/MTyFP/1/</a></p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="statusColumn"&gt;&lt;span&gt;Normal&lt;/span&gt;&lt;/div&gt;
      &lt;div class="statusColumn"&gt;&lt;a&gt;Normal&lt;/a&gt;&lt;/div&gt;
      &lt;div class="statusColumn"&gt;&lt;b&gt;Rotated&lt;/b&gt;&lt;/div&gt;
      &lt;div class="statusColumn"&gt;&lt;abbr&gt;Normal&lt;/abbr&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>With this CSS:</p>
  
  <pre><code>.statusColumn b {
    writing-mode: tb-rl;
    white-space: nowrap;
    display: inline-block;
    overflow: visible;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
  }
  </code></pre>
  
  <p>It ends up looking like this:</p>
  
  <p><img src="https://i.stack.imgur.com/gIK5E.png" alt="A series of four block-level elements. The third element&#39;s text is rotated."></p>
  
  <p>Is it possible to write any CSS that will cause the rotated element to affect its parent's height, such that the text would not overlap the other elements? Something like this:</p>
  
  <p><img src="https://i.stack.imgur.com/d82jr.jpg" alt="The third column&#39;s text now affects its parent box&#39;s height such that the text fits within the box."></p>