Pu sh нижний колонтитул в нижней части flexbox

Question

Я хочу, чтобы мой ReactModal находился в нижней части области просмотра, но он расположен прямо под результатами, и все, что я до сих пор пробовал, не смогло исправить проблему. Я знаю, что это распространенная проблема, и есть много решений в сети, но есть кое-что о том, как я настроил CSS, что не позволяет свойству flex-grow работать так, как я ожидаю. Есть идеи?

JSX:

<div className='App'>
   <div className='main-content'>
      <Header/>
      <Results results={testData}/>
   </div>
   <ReactModal/>
</div>

CSS:

* {
  margin: 0;
  padding: 0;
}

body, html {
  height: 100%;
}

.App {
  text-align: center;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  padding: 1.5rem;
  align-content: center;
  min-height: 100vh;
}

.main-content {
  flex-grow: 1;
}

Answer 1

flex-grow указывает, сколько оставшегося пространства в гибком контейнере должно быть выделено для элемента. Если вы пытаетесь разместить ReactModal в нижней части области просмотра, вы, вероятно, захотите использовать приведенный ниже пример.

Отредактировано

Пример Codepen

Если вы посмотрите на файл css, вы добавите:

position: fixed;
bottom: 0;

Для вашего компонента ReactModal, и он будет размещен в нижней части страницы. Вы не будете использовать flex-grow, потому что в этой ситуации это абсолютно бесполезно.

Надеюсь, это поможет.