elementos girados no css: influenciando a altura dos pais corretamente

no CSS, é possível girar elementos sem afetar o layout ou o fluxo do documento. No entanto, surgem perguntas quando os elementos precisam do texto rotacionado para impactar a altura dos pais.

Aplicando os seguintes CSS:

  
Normal
  
Normal
  
Rotated
  
Normal

resulta no texto girado sobrepondo elementos vizinhos. O objetivo é modificar o CSS para garantir que o elemento girado afete corretamente a altura dos pais, impedindo que o texto se sobreponha. Posição: relativa; borda: 1px sólido #ccc; preenchimento: 2px; margem: 2px; Largura: 200px; } .statuscolumn i, .statuscolumn b, .statuscolumn em, .statuscolumn forte { Modo de escrita: vertical-rl; Transformar: girar (180deg); Espaço branco: Nowrap; Exibição: bloco embutido; transbordamento: visível; }

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