повернутые элементы в CSS: правильное влияние на родительскую высоту

В CSS можно повернуть элементы, не влияя на макет или поток документа. Тем не менее, вопросы возникают, когда элементам нужен их вращающийся текст, чтобы повлиять на высоту своего родителя.

рассмотрим следующий сценарий:

  
Normal
  
Normal
  
Rotated
  
Normal

применение следующего css:

.statusColumn b {
  writing-mode: tb-rl;
  white-space: nowrap;
  display: inline-block;
  overflow: visible;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}

Использование улучшенной поддержки для письменного режима в современных бровнях может быть достигнуто с помощью комбинации свойств:

Этот обновленный CSS гарантирует, что повернутый элемент уважает высоту своего родительского контейнера, предотвращая перекрытие текста и достижение желаемого макета.