CSS правая колонка сетки никогда не больше левой колонки - PullRequest
Новая
       29

CSS правая колонка сетки никогда не больше левой колонки

0 голосов
/ 01 мая 2020

У меня есть оболочка div, которая имеет динамическую c высоту, но обычно не должна превышать высоту окна.

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

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

Правая колонка должна прокручиваться внутри, если она глубже чем высота окна, и это не должно делать прокрутку оболочки.

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

Я создал упрощенный пример, демонстрирующий макет. 

.wrapper {
    display: grid;
    grid-column-gap: 16px;
    grid-template-columns: auto 33%;
}

.item:first-child {
  background-color: red;
}
.item:last-child {
  background-color: blue;
  overflow-y: auto;
}

.child {
  background-color: white;
  height: 50px;
  margin: 20px;
  width: calc(100% - 40px)
}
<html>
<body>
 <div class="wrapper">
    <div class="item">
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
    </div> 
    <div class="item">
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
    </div>
  </div>
</body>
</html>

1 Ответ

0 голосов
/ 01 мая 2020

Если вы хотите прокрутить правую колонку, укажите ее в css. Сначала дайте столбцу класс 

<div class="item itemThatScrolls"> // give it a unique class in the html

А затем в вашем css: 

.itemThatScrolls {
   overflow: scroll;
   height: auto;
   max-height: 100vh;
}

Это, вероятно, не совсем то, что вы хотите, так как в идеале вы бы изменили макс. высота должна быть равна высоте другого столбца. Чтобы сделать это, я бы сказал, что вы должны включить немного javascript magi c и просто динамически устанавливать максимальную высоту второго столбца при определении высоты первых столбцов.

...