Flexbox CSS приводит к элементам с нулевым пикселем

Следующий HTML-файл <html> <body> <div style = " display : flex ; flex-direction : column " > <div style = " flex : 1 ; display : flex " > <pre> Hello </ pre> </ div> </ div> </ body> </ html> ничего, и каждый элемент имеет высоту 0 пикселей:

pre

Я ожидаю, что он отобразит на preстранице «отформатированный» «Привет».

Если я удалю любое из следующего, « pre-формат» «форматированный» отображается правильно, и элементы меняются от 0 пикселей до 10 с высот пикселей:

  • Любой из flex-direction,окружающихpre
  • Любой из встроенных стилей, применяемых к этим пресетам ( display, divflex)

Преобразование prea в a divприводит к появлению «Hello», но окружающие элементы по-прежнему являются неправильной высотой в 0 пикселей, а не ожидаемыми десятками пикселей.

Кто-нибудь знает, что может быть причиной этого?

10Flexbox CSS приводит к элементам с нулевым пикселем

Следующий HTML-файл <html> <body> <div style = " display : flex ; flex-direction : column " > <div style = " flex : 1 ; display : flex " > <pre> Hello </ pre> </ div> </ div> </ body> </ html> ничего, и каждый элемент имеет высоту 0 пикселей:

pre

Я ожидаю, что он отобразит на preстранице «отформатированный» «Привет».

Если я удалю любое из следующего, « pre-формат» «форматированный» отображается правильно, и элементы меняются от 0 пикселей до 10 с высот пикселей:

  • Любой из flex-direction,окружающихpre
  • Любой из встроенных стилей, применяемых к этим пресетам ( display, divflex)

Преобразование prea в a divприводит к появлению «Hello», но окружающие элементы по-прежнему являются неправильной высотой в 0 пикселей, а не ожидаемыми десятками пикселей.

Кто-нибудь знает, что может быть причиной этого?

01JavaScript, HTML, CSS, Flexbox,

javascript,html,css,flexbox,

1

Ответов: 0

Flexbox CSS приводит к элементам с нулевым пикселем

Следующий HTML-файл <html> <body> <div style = " display : flex ; flex-direction : column " > <div style = " flex : 1 ; display : flex " > <pre> Hello </ pre> </ div> </ div> </ body> </ html> ничего, и каждый элемент имеет высоту 0 пикселей:

pre

Я ожидаю, что он отобразит на preстранице «отформатированный» «Привет».

Если я удалю любое из следующего, « pre-формат» «форматированный» отображается правильно, и элементы меняются от 0 пикселей до 10 с высот пикселей:

  • Любой из flex-direction,окружающихpre
  • Любой из встроенных стилей, применяемых к этим пресетам ( display, divflex)

Преобразование prea в a divприводит к появлению «Hello», но окружающие элементы по-прежнему являются неправильной высотой в 0 пикселей, а не ожидаемыми десятками пикселей.

Кто-нибудь знает, что может быть причиной этого?

01JavaScript, HTML, CSS, Flexbox,
Похожие вопросы