высота не изменяется при использовании flexbox под реагирует

Question

Я пытаюсь сделать это в приложении реагирования: https://jsfiddle.net/u4gctqv2/1/

, но пока оно работает в примере ссылки, в приложении реакции высота не изменяется.

Приложение отображает возврат:

return (
      <div className="row0">
        <div className="row1"><p>1</p></div>
        <div className="row2"><p>2</p></div>
        <div className="row3"><p>3</p></div>
      </div>
    );

Код CSS примера приведен в файле App.css.На самом деле применяются цвета фона.

Что-то нужно сделать, чтобы заставить его работать в реакции?

Спасибо !!

Answer 1

Существует корневой элемент, внутри которого находится ваше приложение реакции. Убедитесь, что в вашем CSS вы установили высоту этого элемента на 100%. Не забывайте использовать высоты в процентах, каждый родительский элемент также должен иметь высоту 100%. Поэтому проверьте ваше приложение с помощью инструментов разработчика и убедитесь, что все ваши родительские элементы имеют высоту 100%.

Answer 2

Если вы хотите использовать flexbox для стилизации вашего компонента, вы должны использовать эту структуру для своих элементов:

в вашем компоненте:

<div className="container">
  <div className="row1"> Row 1 </div>
  <div className="row2"> Row 1 </div>
</div>

и в файле CSS:

.container{
  display: flex;
  flexDirection: column;
}

.row1 {
  background: blue;
  flex: 2
}

.row2 {
  background: wheat;
  flex: 4;
}

для получения дополнительной информации о стиле flexbox, перейдите по этой ссылке: https://css -tricks.com / сниппеты / CSS / а-руководство к Flexbox /