Максимальная высота в элементе сетки не будет работать

Question

У меня есть простой css / html, где я пытаюсь создать хороший селектор предметов на одной странице, поэтому у вас есть элементы в левом менеджере инвентаря, и когда вы нажимаете на них, они перемещают их в другой, но если у вас есть больше элементы, которые могут обрабатывать div, должны go в overflow-y: scroll;, но этого не произойдет, поэтому я пытаюсь добавить max-height:100%;, чтобы он не разрушил этот красивый вид, когда нет элементов, но у родителя нет указанных c номер высоты, потому что он находится в сетке, я пытаюсь использовать calc(100vh - 4rem) для родителя, поэтому потребовалось бы 100vh без navbar, но это не выглядит хорошо, и это может создать некоторые проблемы в будущем, когда я изменю navbar. Вы можете скопировать этот код в ваш html и удалить все div.item, чтобы вы знали, как он должен выглядеть, а затем добавить div.item, чтобы вы могли увидеть, что не так

.container {
  display: grid;
  width: 100vw;
  height: 100vh;
  grid-template-columns: 1fr;
  grid-template-rows: 5rem 1fr;
  grid-template-areas: 
    "navbar" 
    "offer-manager";
}

.navbar {
  grid-area: navbar;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: stretch;
  background: yellow;
}

.main {
  grid-area: offer-manager;
  padding: 1rem;
  display: grid;
  grid-template-columns: 1fr 8rem 1fr;
  grid-template-rows: 1fr 6rem 12rem;
  grid-template-areas: 
    "inventory controls offer" 
    "inventory controls ." 
    "inventory . .";
  background: green;
}

.inventory {
  grid-area: inventory;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  padding: 1rem;
  max-height: 100%;
  overflow-y: scroll;
  background: blue;
}

.selectedItems {
  grid-area: offer;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  padding: 1rem;
  max-height: 100%;
  overflow-y: scroll;
  background: red;
}

.item {
  margin: 2rem;
  width: 8rem;
  height: 5rem;
  background: black;
}

<div class="container">
  <div class="navbar">
    <!-- navbar items -->
  </div>
  <div class="main">
    <div class="inventory">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
    </div>
    <div class="selectedItems">

    </div>
    <div class="controlButtons">

    </div>
  </div>
</div>

edit: я знаю, что могу установить фиксированную высоту, но мне нужен тот размер, который я задаю для сетки, поэтому 100vh не будет работать из-за navbar, который 4rem высота.

edit2: cal c (100vh - navbarHeight) вроде работает, но я бы предпочел найти что-то еще, потому что это сломалось бы после нескольких изменений в макете

Answer 1

1fr означает minmax(auto,1fr) независимо от того, какой контент вы поместите в эту строку, он попросит сетку учитывать его размер, поэтому будет переполнение, если этот контент выше.

.container { ... grid-template-rows: 5rem 1fr; }

становится

.container { ... grid-template-rows: 5rem minmax(0,1fr); }

То есть игнорируй мой контент, поставь меня туда, где я должен быть, тогда overflow:auto наступит.

body {
  margin: 0
}

.container {
  display: grid;
  width: 100vw;
  height: 100vh;
  grid-template-columns: 1fr;
  grid-template-rows: 5rem minmax(0, 1fr);
  grid-template-areas: "navbar" "offer-manager";
}

.navbar {
  grid-area: navbar;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: stretch;
  background: yellow;
}

.main {
  grid-area: offer-manager;
  padding: 1rem;
  display: grid;
  grid-template-columns: 1fr 8rem 1fr;
  grid-template-rows: 1fr 6rem 12rem;
  grid-template-areas: "inventory controls offer" "inventory controls ." "inventory . .";
  background: green;
}

.inventory {
  grid-area: inventory;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  padding: 1rem;
  max-height: 100%;
  overflow-y: scroll;
  background: blue;
}

.selectedItems {
  grid-area: offer;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  padding: 1rem;
  max-height: 100%;
  overflow-y: scroll;
  background: red;
}

.item {
  margin: 2rem;
  width: 8rem;
  height: 5rem;
  background: black;
}

<div class="container">
  <div class="navbar">
    <!-- navbar items -->
  </div>
  <div class="main">
    <div class="inventory">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
    </div>
    <div class="selectedItems"></div>
    <div class="controlButtons"></div>
  </div>
</div>

Answer 2

Я согласен с Christian.P, я только что попробовал и поместил max-height: 100vh; в инвентарь, и он работал нормально, свитки переполнения, как я думаю, вы хотели.

Пока контроль высоты не установлен на max-height: 100%;, он должен работать. 100% относительно высоты <div class="main>.

Answer 3

Самый простой способ написать это так: вместо auto или 1fr я использую calc(100vh - navbarHeight) grid-template-rows: 5rem calc(100vh - 5rem); Так что это будет выглядеть так:

.container {
        display: grid;
        width: 100vw;
        height: 100vh;
        grid-template-columns: 1fr;
        grid-template-rows: 5rem calc(100vh - 5rem);
        grid-template-areas: "navbar" "offer-manager";
    }

Answer 4

Если я правильно понял, вы можете попытаться добавить фиксированную высоту в пикселях в свой класс инвентаря.

  .inventory {
        grid-area: inventory;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        flex-wrap: wrap;
        padding: 1rem;
       height:300px;
        overflow-y: scroll;
        background: blue;
    }