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

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%);
}

  This is text


  This is another Pane

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%);
}

  This is text


  This is another Pane


  This is some more text