Как сделать, чтобы верхний блок ограничивал ширину нижних элементов в контейнере

Question

Подскажите как сделать, чтобы ширина блока .text-block определялась шириной верхнего элемента .title.
Остальные же блоки .desc подстраивались под его ширину, а не растягивали контейнер.

.text-block {
  display: flex;
  flex-direction: column;
  background-color: white;
  color: dark-gray;
  padding: 10px;
  border: 1px dashed green;
}

.title {
  font-size: 2.2rem;
  margin-bottom: 2rem;
  flex-grow: 0;
  flex-shrink: 0;
}

.desc {
  font-size: 1.2rem;
  margin-bottom: 2rem;
  flex-grow: 0;
  flex-shrink: 1;
}

.brn {
  font-size: 1rem;
}

<div class="text-block">
  <div class="title">Huge Header</div>
  <div class="desc">Medium text repeat many times medium text repeat many times medium text repeat many times medium text repeat many times</div>
  <div class="desc">Medium text repeat many times medium text repeat many times medium text repeat many times medium text repeat many times</div>
  <div class="btn">Some button textand icon</div>
</div>

Answer 1

Внезапно узнаём, что кроме всяких там grow и shrink-ов, есть ещё и такое чудо-свойство, как max-width. Добавляем это свойство... чудо свершилось!

Запустите пример и попробуйте изменить заголовок:

.text-block {
  display: flex;
  flex-direction: column;
  background-color: white;
  color: dark-gray;
  padding: 10px;
  border: 1px dashed green;
  max-width: min-content;
}

.title {
  font-size: 2.2rem;
  margin-bottom: 2rem;
  flex-grow: 0;
  flex-shrink: 0;
  white-space: nowrap;
  box-shadow: 0 0 0 1px blue;
  max-width: max-content;
}

.desc {
  font-size: 1.2rem;
  margin-bottom: 2rem;
  flex-grow: 0;
  flex-shrink: 1;
  box-shadow: 0 0 0 1px orange;
}

.btn {
  font-size: 1rem;
  box-shadow: 0 0 0 1px red;
}

<div class="text-block">
  <div class="title" contenteditable>Huge Header Header</div>
  <div class="desc">Medium text repeat many times medium text repeat many times medium text repeat many times medium text repeat many times</div>
  <div class="desc">Medium text repeat many times medium text repeat many times medium text repeat many times medium text repeat many times</div>
  <div class="btn">Some button textand icon</div>
</div>

БЛОГ НА HUSL

Как сделать, чтобы верхний блок ограничивал ширину нижних элементов в контейнере

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