Установить равную высоту двух независимых компонентов angularjs

Question

У меня есть два компонента angularjs, отображающие различный контент, размещенный вертикально на странице -

Мне нужно установить высоту обоих компонентов, чтобы быть равными. Итак, мне нужно увеличить высоту компонентов B, чтобы она была равна высоте компонента A, если высота компонента A больше, чем высота компонента B на основе содержимого, которое отображает компонент A. Кроме того, всякий раз, когда увеличивается содержание / высота любого компонента, мне снова нужно заново регулировать высоту другого компонента.

Я пытался получить высоту компонентов в ng-init, используя heightOffset, но последовательно получал значение 0. Я также посмотрел ResizeObserver, но в настоящее время поддержка браузера ограничена.

Есть ли другой способ добиться требуемого поведения?

Answer 1

Это может быть решено чисто с помощью CSS. Вы можете использовать flex-box с align-items: stretch;, Смотрите здесь для получения дополнительной информации.

#container {
  display: flex;
  align-items: stretch;
}

#left {
  display: flex;
  flex-grow: 1;
  border: 1px solid #999;
  min-height: 10px;
}

#right {
  display: flex;
  flex-grow: 1;
  border: 1px solid #999;
  min-height: 10px;
}

<div id="container">
  <div id="left"></div>
  <div id="right"></div>
</div>

<br>

<button onclick="document.getElementById('left').innerHTML += 'New line<br>'">Add new line to left</button>
<button onclick="document.getElementById('right').innerHTML += 'New line<br>'">Add new line to right</button>