Как наследовать высоту div от родительского div без flex, чтобы войти в игру

Question

Я пытаюсь вставить сетку внутри моей главной страницы.Я делю свою главную страницу на два контейнера, один для заголовка и один для сетки.Я указал конкретную высоту для заголовка, и я ожидаю, что сетка должна поместиться в оставшийся контейнер.

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

Я хочу, чтобы сетка отображаласьтолько внутри просмотра страницы и не увеличивайте высоту страницы.то есть, если есть больше записей, я хочу, чтобы сетка показывала полосу прокрутки, а не главную страницу

Я попытался удалить flex, добавить высоту vh и высоту 100%, но, похоже, ничего не работает.Я также попытался скрыть переполнение, но оно скрывает содержимое сетки.Мне нужен контент, но не переполнение

containerStyle: {
    width: "100%",
    display: "flex",
    paddingTop: viewPortWidth <= theme.sizes.Breakpoints.DimensionS ? undefined : "1.25rem",
    flexDirection: "column",
    flex: "1 0 auto",
    position: "relative",
},

Ожидаемый результат

Answer 1

Если вы можете использовать sass, вы можете сделать что-то вроде:

HTML

<div class="header">...</div>
<div class="page-content">
  <div class="data-grid">
    ...
  </div>
</div>

SCSS

$header-height:80px;
$gutter: 30px;
$header-gap: $gutter;
$page-gap:  $gutter;
$page-space: $gutter;
$subtract: $header-height + $header-gap + $page-gap;

.header{
   height: $header-height;
   margin-bottom: $header-gap;
}

.page-content {
   height: calc(100% - #{$subtract});
   padding: $page-space;
}

.data-grid {
   height: 100%;
   overflow-y: auto;
   overflow-x: hidden;
}

Пример

Answer 2

Если ваш заголовок имеет фиксированную высоту, вы можете использовать calc, чтобы установить высоту основного содержимого, например, высоту: calc (100vh - 80px);Чтобы сделать прокрутку основного содержимого, добавьте overflow-y: scroll;

Пример:

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  margin: 0;
}

.wrapper {
  position: relative;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

header {
  background: orange;
  height: 123px;
  flex-shrink: 0;  
}

main {
  flex-grow: 1;
  background: tomato;
  overflow-y: auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

article {
  width: 29%;
  margin: 2%;
  height: 50vh;
  background: olive;
}

<div class="wrapper">
  <header>Header</header>
  <main>
    <article></article>
    <article></article>
    <article></article>
    <article>No room for me</article>
  </main>
</div>