Блог

Главная - Вопросы по программированию - Flexbox CSS приводит к элементам высотой в ноль пикселей

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

#javascript #html #css #flexbox

#javascript #HTML #css #flexbox

Вопрос:

Следующий HTML-файл ничего не отображает, и каждый элемент имеет высоту 0 пикселей:

 <html>
    <body>
        <div style="display: flex; flex-direction: column">
            <div style="flex: 1; display: flex">
                <pre>Hello</pre>
            </div>
        </div>
    </body>
</html>

Я ожидаю, что на странице будет отображаться pre «Привет» в формате a.

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

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

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

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

Комментарии:

1. я не могу воспроизвести проблему. предварительная версия имеет высоту 15 пикселей ( поля), divs, окружающие предварительную версию, имеют высоту 41 пиксель (возможно, я не правильно понял ваш вопрос). смотрите Здесь jsfiddle.net/c0ufpqk7

2. Странно, что он ведет себя так в JSFiddle; когда я вставляю его в пустой HTML-файл и открываю его в Chrome, он выглядит так imgur.com/a/PCzxj и все элементы имеют ненулевую ширину, но нулевую высоту

3. хорошо. я пробовал также с голым HTML-файлом chrome> imgur.com/a/KzpvW это все еще работает

4. Если вы используете Internet Explorer 10 или 11, существует известная ошибка с сокращением flex. См. github.com/philipwalton /…