Итак, мы работали над библиотекой компонентов для React, и, спустя некоторое время, обнаружили проблему, связанную с одним из базовых компонентов, а именно с горизонтальной линией, выполнявшей роль разделителя. Проблема рендеринга самой примитивной линии - это практически невообразимо.

Простейшая версия этого компонента выглядела так:

const Divider = props => {
  const { dataTest, type } = props;
  const className = type === 'thick' ? 'thick' : undefined;
  return (
    

  );
}

И этот компонент генерировал следующий HTML-код:

Вы видите HTML-тег

---

. Да, в данном случае использовался устаревший синтаксис HTML-документов, но никаких явных ошибок, препятствующих выводу горизонтальной линии не было.

В целом, генерируемый код проекта, в котором ошибка впервые дала о себе знать, был исключительно прост:

  
Some text here
  

  
More text here

Итак, все были озадачены. Естественно, мы проверили версии библиотек, корректность импорта, корректность использования компонентов, так же, мы неоднократно проверили проект на отсутствие дополнительных стилей, применяемых к hr. Все результаты были превосходными, ошибок не было, как и горизонтальной линии в проекте.

Спустя некоторое время, мы наконец-то выяснили, что произошло.

Проблема заключалась в том, что весь контент был обернут в блок с следующими CSS-свойствами:

.container {
    display: flex;
    flex-direction: column;
}

Когда мы используем FlexBox, практически все элементы внутри flex-контейнера ведут себя так же, как и в обычных условиях. Но некоторые свойства: flex, display, clear меняют свое поведение.

Браузеры отображают

---

, как пустой блок с автоматическим позиционированием горизонтальных отступов (margin-left: auto; margin-right: auto). Такой блок будет центрироваться по горизонтали, если указана его ширина. Но, когда

---

находится внутри flex-контейнера, его ширина по умолчанию приводится к 0 и он не отображается.

Посмотрим на пример:

Есть два варианта решения такой проблемы:

1. нужно установить ширину для тега

   ---

   ,
2. избегать использования FlexBox в подобных случаях.

---

Итак, FlexBox отличный и мощный инструмент, возможно, это лучшее, что случилось в CSS за долгое время. Тем не менее, он должен применяться только в тех случаях, когда действительно необходим. Необдуманное использование flex-модели, как мы убедились, приводит к неожиданным результатам.

---

Спасибо за внимание.

---

По материалам статьи Alvaro Motoro “The Disappearing Line (a CSS Mystery)”.