Почему появляется прокрутка в grid хотя стоит height: 100vh?

Question

Почему не срабатывает в .wrapper свойство height: 100vh; ?

Появляется прокрутка, также некорректно работает .item__body свойство overflow: auto; height: 100%;

body {
  margin: 0;
}
.wrapper {
  height: 100vh;
  background: #000;
  display: grid;
  grid-gap: 1px;
  grid-template-rows: 120px minmax(60px, auto);
  grid-template-columns: 1fr 1fr;
}
.item {
  background: #fff;
}
.item__header {
  height: 20px;
  padding: 5px;
  border-bottom: 1px solid #afafaf;
}
.item__body {
  overflow: auto;
  height: 100%;
  padding: 5px;
}

<div class="wrapper">
  <div class="item">
    <div class="item__header">Header</div>
    <div class="item__body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non roident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  </div>
  <div class="item">
    <div class="item__header">Header</div>
    <div class="item__body">2</div>
  </div>
  <div class="item">
    <div class="item__header">Header</div>
    <div class="item__body">3</div>
  </div>
  <div class="item">
    <div class="item__header">Header</div>
    <div class="item__body">4</div>
  </div>
</div>

Решить можно костыльно, что то типа примерно height: calc(100% - 40px);, но хотелось бы обойтись без этого

Answer 1

У Вас .item__body { height: 100%; } от чего? От родителя? И плюсом высота и отступы .item__header - конечно будет прокрутка, раз блоки больше 100%. Чтобы такого избежать, добавьте flex-овости для .item:

body {
  margin: 0;
  /*box-sizing: border-box;*/
}

.wrapper {
  height: 100vh;
  background: #000;
  display: grid;
  grid-gap: 1px;
  grid-template-rows: 120px minmax(60px, auto);
  grid-template-columns: 1fr 1fr;
}

.item {
  background: #fff;
  display: flex;
  flex-flow: column;
}

.item__header {
  height: 20px;
  padding: 5px;
  border-bottom: 1px solid #afafaf;
}

.item__body {
  overflow: auto;
  height: 100%;
  padding: 5px;
}

<div class="wrapper">
  <div class="item">
    <div class="item__header">Header</div>
    <div class="item__body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non roident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  </div>
  <div class="item">
    <div class="item__header">Header</div>
    <div class="item__body">2</div>
  </div>
  <div class="item">
    <div class="item__header">Header</div>
    <div class="item__body">3</div>
  </div>
  <div class="item">
    <div class="item__header">Header</div>
    <div class="item__body">4</div>
  </div>
</div>

Answer 2

Потому что у .item__body стоит высота 100%. Поэтому его высота выходит за рамки родителя .item.

Лучше убрать высоту, тогда исчезнет скролл.

БЛОГ НА HUSL

Почему появляется прокрутка в grid хотя стоит height: 100vh?

Ответы (2 шт):