Установить высоту элемента из другого элемента в Angular2

Question

У меня есть два div в разделе, который содержит динамический контент. Левый контейнер содержит список чисел и другой список полей ввода. Мне нужно расставить приоритеты для контейнера полей ввода, если этот контейнер растянется до 600 пикселей в высоту, мне нужно, чтобы эта высота была в моем числовом контейнере, а затем этот элемент перешел бы в отдельную прокрутку, если его длина превышает 600 пикселей.

Пример img

Пример кода

<section>
  <div class="numbers">
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>

  </div>
  <div class="inputs">
    <input type="text">
    <input type="text">
    <input type="text">
    <input type="text">

  </div>

</section>

section {
  display: flex;
}
.numbers {
  margin-right: 50px;
}
.numbers div {
  background: black;
  height: 20px;
  width: 20px;
  margin-bottom: 10px;
  color: #fff;
}
.inputs {
  display: flex;
  flex-direction: column;
}
  input {
    margin-bottom: 20px;
  }

Answer 1

Это моё решение этой проблемы, я создал функцию, которая вызывается в Oninit, и для каждой кнопки, которая обновляет контент, а в html я вызывал ее [style.height.px]="elHeight - 100"

.

Это мой машинописный код

  getHeight() {
        const leftEl = document.getElementById('number-col');
        const rightEl = document.getElementById('question-col');

        setTimeout(() => {
          this.elHeight = rightEl.clientHeight;
        }, 100);


      }

Answer 2

адаптация высоты div в javascript или в angulaJS мне кажется неправильным выбором, поэтому я попытался сделать это в css, и это не очень чистое решение

section{
  padding-left:40px;
  position:relative;
}
.numbers{
  overflow-y:scroll;
  max-height:100%;
  position:absolute;
  left:0px;
}

это похоже на работу, но есть много других способов сделать это: начальная загрузка, таблицы, сетка, flex, все, что вы уже используете в своем html для обеспечения согласованности.