Resize div when content is rotated

Question

I don't know that my question is much different than the question in the possible duplicate. However, the answer in the possible duplicate does not work (even the jsFiddle provided as the answer does not seem to even rotate the text). The answer on this thread actually solved my problem.

I'm trying to get a div to resize when the text inside is rotated 90 degrees. Right now, the div stays the same width even though the text becomes "thinner" by rotating it.

I've got something like this:

html, body {
  height: 100%;
  margin:0px;
}

.pane {
  width: auto;
  float:left;
  height: 100%;
  border: 1px solid black;
}

.vertical {
  display: block;
  transform-origin: top right 0;
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

<div class="pane"><span class="vertical clearfix">This is text</span></div>
<div class="pane"><span>This is another Pane</span></div>

You can see a sample plunk here.

I'm trying to avoid using hardcoded heights or widths if possible.

Answer 1

when you use transform or position:relative; the initial space used by the element remains the same, it is only drawn different at screen.

Here if you want your rotated box to only use the width of one line height, you need to set this width and let content overflow.

translate can be used to replace content in sight

white-space:nowrap to keep text on a single line

and eventually, because of the rotated value used and the width reduced, you may use direction to push overflow in the opposite direction .

html,
body {
  height: 100%;
  margin: 0px;
}

.pane {
  width: auto;
  float: left;
  height: 100%;
  border: 1px solid black;
}

.vertical {
  display: inline-block;
  text-align: left;
  float: right;
  padding-right: 1em;
  width: 0.25em;
  white-space: nowrap;
  direction: rtl;
  transform-origin: top left;
  transform: rotate(-90deg) translate(-100%);
}

<div class="pane">
  <span class="vertical">This is text</span>
</div>
<div class="pane">
  <span>This is another Pane</span>
</div>

Else you may use min-width , and a negative margin that virtually reduce elements width to none;

I would go for this one more simple and solid

html,
body {
  height: 100%;
  margin: 0px;
}

.pane {
  width: auto;
  min-width:1.2em;
  float: left;
  height: 100%;
  border: 1px solid black;
}

.vertical {
  display:inline-block;
  padding-right:0.25em;
  margin-right:-999px;
  transform-origin: top left;
  transform: rotate(-90deg) translate(-100%);
}

<div class="pane">
  <span class="vertical">This is text</span>
</div>
<div class="pane">
  <span>This is another Pane</span>
</div>
<div class="pane">
  <span class="vertical">This is some more text</span>
</div>