Как сделать разную высоту блоков одного класса по содержимому?

Question

Нужно чтобы блок подстраивался под высоту содержимого внутри. Он же делает фиксированную высоту для всех, исходя из максимальной высоты наибольшего (2-ой)

SASS

.component
    border: 2px solid blue
    display: flex
    align-items: center
    flex-direction: column
    width: 280px
    height: 100%

HTML

<div class="component">
    <img class="component__img component__img-one" src="img/svg/component-1.svg" alt="Fast delivery">
    <span class="component-header">Доставка по городу</span>
    <p class="component-description">Осуществляем доставку<br>по городу от 2000р</p>
</div>

Answer 1

Достаточно задать для высоты значение max-content :

/* For example only --> */ .components { display: flex; align-items: center; flex-direction: column; min-height: 97vh; gap: 1vh; padding: 1vh; border: 2px solid blue; }

.component {
  display: flex;
  align-items: center;
  flex-direction: column;
  height: max-content; /* Высота по контенту */
  width: 280px;
  border: 2px solid blue;
}

<div class="components">
  <h1>Качество проверенное временем</h1>
  <div class="component">
    <img class="component__img component__img-one" src="img/svg/component-1.svg" alt="Fast delivery">
    <span class="component-header">Доставка по городу</span>
    <p class="component-description">Осуществляем доставку<br>по городу от 2000р</p>
  </div>
  <div class="component">
    <img class="component__img component__img-one" src="img/svg/component-2.svg" alt="Fast delivery">
    <span class="component-header">Качественные материалы</span>
    <p class="component-description">Предлагаем обширный ассортимент материалов от отечественных и зарубежных производителей из Италии. Франции, Нидерландов итд. Работаем с натуральной кожей и кожзаменителем</p>
  </div>
  <div class="component">
    <img class="component__img component__img-one" src="img/svg/component-3.svg" alt="Fast delivery">
    <span class="component-header">Срочность исполнения</span>
    <p class="component-description">Оставьте вашу заявку на сайте или напишите нам на почту. В ближайшее время мы свяжемся с вами и запустим заказ в производство!</p>
  </div>
</div>

БЛОГ НА HUSL

Как сделать разную высоту блоков одного класса по содержимому?

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