Размер блока, пропорциональный тексту

Question

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

Вопрос: если блок умещается в родителя, то увеличивать его ширину до тех пор, пока весь текст не влезет. Как только упёрся, то переносить текст на следующую строку и увеличивать высоту. При этом, если текст влез, то не увеличивать более блок.

Вопрос: мне мне нужно, чтобы так вели себя несколько блоков. При этом, в каждом блоке разное количество текста. Но они должны "подчиняться" тому блоку, в котором больше всего текста.

Если width: 100%, то

Если ширину убрать вовсе, то получится так:

Требуется, чтобы во втором случае первый блок был равен по ширине второму блоку.

Answer 1

Это можно реализовать следующим образом:

#parent {
  background: lightblue;
  width: 400px;
}

#child {
  background: #3d3d3d;
  width: 100%;
  color: white;
  font-size: 1.2em;
}

#child2 {
  width: 100%;
  background: red;
  color: white;
}

<div id="parent">
  <div id="child">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin turpis purus, sodales eget ultricies tempus, iaculis vitae dolor. Nullam lobortis urna lacus, quis eleifend est malesuada et. Donec felis justo, elementum nec augue et, aliquet imperdiet augue.
    Nam at tellus eu velit pulvinar mollis. Donec laoreet fermentum justo ac aliquet. Pellentesque neque est, rhoncus faucibus commodo sit amet, lobortis sit amet magna. Aliquam erat volutpat. Nam justo sem, malesuada facilisis massa nec, ornare cursus
    augue. Maecenas dolor nunc, bibendum nec turpis non, aliquam pulvinar massa. Curabitur dapibus venenatis velit, nec luctus odio fermentum et. Nam feugiat odio sed ligula euismod, sed luctus dolor fringilla. Nulla ut odio urna. Nam egestas luctus est.
  </div>
  <br>
  <div id="child2">
    Lorem ipsum dolor sit amet,
  </div>
</div>

Answer 2

Выставите родителю display: inline-block; и max-width: 100%;, тогда родитель начнёт растягивать от самого длинного дочернего элемента, а остальные элементы будут принимать длину родителя.

P.s. display: inline-block; сделает родителя строчным элементом, чтобы он не ломал вёрстку, оберните его блочным.

.list {
  display: inline-block;
  width: auto;
  max-width: 100%;
  background: #ccc;
  padding: 5px;
  box-sizing: border-box;
}

.list .item {
  display: block;
  width: 100%;
  background: #eee;
  color: #333;
  height: 24px;
  line-height: 24px;
  padding: 0 5px;
  box-sizing: border-box;
}

.list .item:not(:last-child) {
  margin-bottom: 5px;
}

<div class="list">
  <div class="item">asdasdas</div>
  <div class="item">asdas</div>
  <div class="item">asdasas</div>
  <div class="item">asdas</div>
  <div class="item">asdasddasasdasdasdasd</div>
</div>

БЛОГ НА HUSL

Размер блока, пропорциональный тексту

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