Полная высота в React с использованием flex

Question

Я не могу найти ответ на этот вопрос, хотя существует множество flex тематических вопросов.

Я создал простое приложение React (npx create-react-app).

Я тогдаудалил App.css и установил для index.css значение:

html, body, #root {
    height: 100%;
    margin: 0;
}

Далее, в App.js Я пытаюсь использовать полноэкранный элемент, используя flex:

import React from 'react';


function App() {
  return (
    <div style={{ backgroundColor: 'blue', display: "flex", flex: 1 }}>
      <div style={{ display: "flex", flexDirection: "column", flex: 1 }} />
    </div>
  );
}

Но это не сработает. Почему гибкий элемент не растягивается?

Answer 1

Flex-grow работает, когда в Flex есть другие элементы. Это заставляет элемент расти в x раз по сравнению с другими.

по сравнению с решением, которое вы внедрили: внутреннее div не требует display: flex и направление тоже. Он будет унаследован от родителя div.

. Для того, чтобы div занял всю высоту. добавьте height: 100vh к родительскому разделу.

Дайте мне знать, если это решит проблему.

Спасибо.

Answer 2

Чтобы достичь высоты окна, вам нужно указать высоту: 100vh для родительского тега, например

class- .parent{height: 100vh}

стиль объекта - style={{height: '100vh'}}

import React from 'react'
 function App() {
  return (
    <div style={{ backgroundColor: 'blue', display: "flex", height:'100vh' }}>
      <div style={{ display: "flex", flexDirection: "column", flex: 1 }} >Hello world</div>
    </div>
  );
}