У меня есть одно требование, где мне нужно применить ширину к родительскому элементу, который равен ширине первого дочернего элемента. Это может быть легко достигнуто с помощьюdisplay: inline-block или жеfloat: left к родительскому элементу, если у него есть только один дочерний элемент. Но у меня есть более двух дочерних элементов в div. Что-то вроде этого:

скрипка

<div class="main">
    <div class="first">first</div>
    <div class="value">valuevalue</div>
</div>

Прямо сейчас, если я подам заявкуdisplay: inline-block к родительскому элементу, то он имеет ширину второго дочернего элемента.

Чтобы этого не случилось, я пыталсяbreak-word, word-break Свойства CSS на втором дочернем элементе, но все еще бесполезны.

То, что я пытаюсь получить, показано на следующем снимке экрана:

Некоторые важные моменты:

ширина родительского элемента должна быть равна первому дочернему элементу.Высота родительского элемента должна быть равна сумме всех дочерних элементов.Я не знаю ширину первого дочернего элемента.(РЕДАКТИРОВАТЬ) Первый дочерний элемент имеет фиксированную ширину и высоту. Я не знаю этих ценностей.

Я хочу сделать это, используя только CSS. CSS3 приветствуется. (Я знаю как это сделать используя javascript)