Как запретить растяжение строки по высоте в grid контейнере?

Question

.grid_container {
  height: 100vh;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2fr 1fr;
}
  .item {
    text-align: center;
    background-color: #4a7a60;
    padding: 3px;
    font-size: 35px;
    width: 300px;
    //height: 600px ;
    overflow-y: auto; // если данных много должна появится полоса прокрутки, и не расти высота контейнера
  }
  .zone_1 {
    background-color: #455a64;
  }
  .zone_2 {
    background-color: #455a00;
  }

<div class="grid_container">
  <div class="zone_1">
    <div class="item">
      <p>Данные_1</p>
      <p>Данные_1</p>
      <p>Данные_1</p>
      <p>Данные_1</p>
      <p>Данные_1</p>
      <p>Данные_1</p>
      <p>Данные_1</p>
      <p>Данные_1</p>
      <p>Данные_1</p>
      <p>Данные_1</p>
      <p>Данные_1</p>
      <p>Данные_1</p>
      <p>Данные_1</p>
      <p>Данные_1</p>
      <p>Данные_1</p>
      <p>Данные_1</p>
      <p>Данные_1</p>
      <p>Данные_1</p>
      <p>Данные_1</p>
      <p>Данные_1</p>
      <p>Данные_1</p>
    </div>
  </div>

  <div class="zone_2">
    ZONE_2
  </div>
</div>

Здравствуйте есть 2 строки в grid контейнере строки по высоте занимают все доступное пространство в отношении grid-template-rows: 2fr 1fr Если высота элемента становится большая внутри этих строк, то зона тоже начинает расширяться, а мне нужно чтобы появлялся скролл и само соотношение 2fr 1fr не менялось. Если вручную ограничить высоту элемента, то будет появлятmся скролл при переполнении, но тогда элемент не сможет занимать всю отведенную высоту строки.

Answer 1

Если я правильно поняла Ваш запрос, Вы хотели добиться подобного эффекта

.container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2fr 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "zone_1"
    "zone_2";
  height: 100vh;
}

.zone_1 {
  grid-area: zone_1;
  background: red;
  text-align: center;
  width: 300px;
  max-height: 600px;
  overflow-y: scroll;
}

.zone_2 {
  grid-area: zone_2;
  background: lightblue;
  width: 300px;
}

<div class="container">
  <div class="zone_1">
    <p>Данные</p>
    <p>Данные</p>
    <p>Данные</p>
    <p>Данные</p>
    <p>Данные</p>
    <p>Данные</p>
    <p>Данные</p>
    <p>Данные</p>
    <p>Данные</p>
    <p>Данные</p>
    <p>Данные</p>
    <p>Данные</p>
    <p>Данные</p>
    <p>Данные</p>
    <p>Данные</p>
    <p>Данные</p>
    <p>Данные</p>
    <p>Данные</p>
    <p>Данные</p>
    <p>Данные</p>
    <p>Данные</p>
  </div>
  <div class="zone_2">
    <p>Данные</p>
  </div>
</div>

БЛОГ НА HUSL

Как запретить растяжение строки по высоте в grid контейнере?

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