Установка высоты ряда по меньшему элементу в этой строке (grid)

Question

Есть таблица с одной строкой. В этой строке только два элемента. Элементы одинаковые, за исключением содержания в блоках. Эти блоки имеют возможность прокрутки контента. Нужно что бы меньший элемент задавал высоту строки. А больший элемент просто прокручивал блок с "излишним" содержимым. Ожидаемое поведение приведено ниже, но это достигнуто строкой height: 186px; для класса elem, но это действительно только для такого набора содержимого. Если контента станет больше или меньше размер не измениться (что логично, т.к. я указал тут размер на прямую т.к. хочу показать чего хочу добиться).

Собственно вопрос: как это сделать правильно и независимо от объема содержимого в первом и втором элементе.

body {
  display: flex;
  justify-content: center;
  align-items: center;
}

.table {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
}

.block {
  background-color: bisque;
}

.elem {
  height: 186px;
  width: 200px;
  overflow-y: auto;
  overflow-x: auto;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="src/style.css">
  </head>
  <body>
    <div class="table">
      <div class="block">
        <h1>Block 1</h1>
        <div class="elem">
          <p> text 1 </p>
          <p> text 2 </p>
          <p> text 3 </p>
          <p> text 4 </p>
          <p> text 5 </p>
          <p> text 6 </p>
          <p> text 7 </p>
          <p> text 8 </p>
          <p> text 9 </p>
        </div>
      </div>
      <div class="block">
        <h1>Block 2</h1>
        <div class="elem">
          <p> text 1 </p>
          <p> text 2 </p>
          <p> text 3 </p>
          <p> text 4 </p>
          <p> text 5 </p>
        </div>
      </div>
   </div>

  </body>
</html>

Answer 1

Только начинаю учить js. Я сделал так. Наверное не самый лучший вариант, потом может что-то ещё придумаю. Общий смысл в том, что надо получить высоту каждого блока, найти потом минимальную и задать классу elem

let elems = document.querySelectorAll('.elem');

let elem1 = document.getElementById('elem1');
let height1 = elem1.clientHeight;
let elem2 = document.getElementById('elem2');
let height2 = elem2.clientHeight;


let minHeight = Math.min(height1, height2);

elems.forEach(elem => {
    elem.style.height = minHeight + 'px';
});

body {
  display: flex;
  justify-content: center;
  align-items: center;
}

.table {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
}

.block {
  background-color: bisque;
}

.elem {
  width: 200px;
  overflow-y: auto;
  overflow-x: auto;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="src/style.css">
  </head>
  <body>
    <div class="table">
      <div class="block">
        <h1>Block 1</h1>
        <div class="elem" id = "elem1">
          <p> text 1 </p>
          <p> text 2 </p>
          <p> text 3 </p>
          <p> text 4 </p>
          <p> text 5 </p>
          <p> text 6 </p>
          <p> text 7 </p>
          <p> text 8 </p>
          <p> text 9 </p>
        </div>
      </div>
      <div class="block" id = "block2">
        <h1>Block 2</h1>
        <div class="elem" id = "elem2">
          <p> text 1 </p>
          <p> text 2 </p>
          <p> text 3 </p>
          <p> text 4 </p>
          <p> text 5 </p>
        </div>
      </div>
   </div>

  </body>
</html>

БЛОГ НА HUSL

Установка высоты ряда по меньшему элементу в этой строке (grid)

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