родитель по высоте дочернего элемента с наименьшей высотой

Рейтинг: 0Ответов: 1Опубликовано: 11.05.2023

нунжо что бы wrapper имел height первого ребенка, а не самого высокого.

возможно ли это без задания высоты руками?

.wrapper {
display: flex;
border: 1px solid red;
gap: 20px;
}

.second {
overflow: auto;
}
  <div class="wrapper">
    <div>
      <div>1</div>
      <div>2</div>
    </div>
    <div class="second">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
    </div>
  </div>

css
Источник: Stack Overflow на русском

Ответы

▲ 1Принят

В голову пришел только такой вариант

let wrap = document.querySelector(".wrapper");
let first = document.querySelector(".first");



let a = first.clientHeight + "px";
wrap.style.maxHeight = a;
.wrapper {
  display: flex;
  border: 1px solid red;
  gap: 20px;
  }
  
  .second {
  overflow: auto;
  }

  .first {
    height: 36px;
  }
  <div class="wrapper">
    <div class="first">
      <div>1</div>
      <div>2</div>
    </div>
    <div class="second">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
    </div>
  </div>