Как сделать так, чтобы у гибкого компонента нижняя часть была прикреплена к нижней части браузера, но верхняя позиция была динамичной?

Question

У меня есть сторонний компонент, который использует display:flex.Он ведет себя правильно с точки зрения своей верхней позиции, но я хочу, чтобы нижняя часть компонента была прикреплена к нижней части окна браузера.

https://codesandbox.io/s/18ox21zqm4

const App = () => (
  <div>
    <Menu fixed="top" inverted>
      <Container>
        <Menu.Item as="a" header>
          Navbar
        </Menu.Item>
        <Menu.Item as="a">Home</Menu.Item>
      </Container>
    </Menu>

    <div style={{ position: "fixed", top: "100px" }}>
      <Header as="h1">Dynamic Height Content</Header>

      <TextArea placeholder="This container height may grow or shrink based on content." />
      <Segment style={{ backgroundColor: "red" }}>
        <Grid>
          This 3rd party component which uses display:flex should have top just
          below above component, bottom fixed to browser window bottom (scales
          with window resize).
        </Grid>
      </Segment>
    </div>
  </div>
);

render(<App />, document.getElementById("root"));

Я попытался поместить компонент в div с фиксированными верхом и низом, используя ссылку на этот div, чтобы получить высоту и получить, какая высотагибкий компонент должен быть, но высота от ссылки не обновляется с изменением размера окна, только при перезагрузке браузера.

Как мне достичь своей цели?

Answer 1

Фактический вывод HTML:

<div style="position: fixed; top: 100px; bottom: 0px;">
  ...
  <div class="ui segment" style="background-color: red;">
    <div class="ui grid" style="height: 100%;">This 3rd party component which uses display:flex should have top just below above component, bottom fixed to browser window bottom (scales with window resize).</div>
  </div>
</div>

Так как ваш <div class="ui segment"> не имеет высоты, присвоение <div class="ui grid"> высоты 100% ничего не делает, так как это просто 100% изродитель.Вам необходимо добавить height: 100% к <div class="ui segment"> aka <Segment />, чтобы он мог заполнить пространство, установленное высотой оберточного div.

<div style={{ position: "fixed", top: "100px", bottom: "0px" }}>
  <Header as="h1">Dynamic Height Content</Header>

  <TextArea placeholder="This container height may grow or shrink based on content." />
  <Segment style={{ backgroundColor: "red", height: "100%" }}>
    <Grid>
      This 3rd party component which uses display:flex should have top just
      below above component, bottom fixed to browser window bottom (scales
      with window resize).
    </Grid>
  </Segment>
</div>

Answer 2

Мы можем сделать что-то подобное, но обычно это не очень хорошая практика кодирования (у нас пока недостаточно репутации, чтобы комментировать)

<Segment style={{ backgroundColor: "red", height: "100vh" }}>