Firefox align-items в сочетании с rotate () - PullRequest
Новая
       21

Firefox align-items в сочетании с rotate ()

0 голосов
/ 12 апреля 2019

Я пытаюсь создать повернутый заголовок для компактной таблицы, и он отлично работает в Chrome, но не в Firefox.

Код: 

div {
  display: flex;
  align-items: stretch;
}

span {
  border-left: 1px solid black;
  writing-mode: vertical-lr;
  transform: rotate(200deg);
  display: inline-flex;
  align-items: center;
  padding: 0;
  white-space: nowrap;
  width: 35px !important;
}
<div>
  <span><b>Hello</b> world</span>
  <span><b>Foo</b> bar</span>
</div>

В Chrome (и Edge) я получаю:

enter image description here

В Firefox я получаю:

enter image description here

Если вынуть align-items: center, я получу одинаковое поведение во всех браузерах, но, очевидно, потерю выравнивание:

enter image description here

Полагаю, я могу взломать это с помощью padding, но я бы лучше знал, что он делает для дальнейшего использования.

...