1

Нужно чтобы блок подстраивался под высоту содержимого внутри. Он же делает фиксированную высоту для всех, исходя из максимальной высоты наибольшего (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>
1
  • Пожалуйста, исправьте вопрос, чтобы он отражал конкретную проблему с достаточным количеством деталей для возможности дать адекватный ответ. 9 мар 2022 в 15:34

1 ответ 1

0

Достаточно задать для высоты значение 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>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.