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

Question

EDIT. Вопрос переформулирован, как предложил @ Азиз в своих комментариях. Ранее он спрашивал о достижении такого же эффекта с inline-block, что кажется невозможным, см. Ответ CSS when inline-block elements line-break, parent wrapper does not fit new width. Новый вопрос спрашивает, как еще этот эффект может быть достигнут, так что это больше не дублируется.

У меня есть контейнер родительских строк с двумя дочерними столбцами. Я хочу, чтобы каждый из детей обернул их текстовое содержимое, а затем сжимал до своей ширины после обертывания.

В приведенном ниже примере почти достигает этого эффекта:

.parent { 
 
    display: inline-block; 
 
} 
 
.child { 
 
    max-width: 180px; 
 
    display: inline-block; 
 
    border: solid thin; 
 
}

<div class="parent"> 
 
    <div class="child"> 
 
     I am child with loooong text. 
 
    </div> 
 
    <div class="child"> 
 
     I am child with loooong text. 
 
    </div> 
 
</div>

Here is a Demo

Единственная проблема заключается в том, что каждый ребенок полностью не сжиматься, чтобы соответствовать его содержание. В правом тексте внутри каждого ребенка есть ясный пробел в пробеле.

Answer 1

Для достижения желаемого эффекта вам нужно только убедиться, что .child является блочным элементом. таким образом, он будет занимать ширину родителя и обернуть остальное под ним.

.parent { 
 
    border:1px solid red; 
 
    display: inline-block; 
 
} 
 
.child { 
 
    border:1px dashed red; 
 
}

<div class="parent"> 
 
    I shrink to content slightly longer 
 
    <div class="child"> 
 
    incl.Child 
 
    </div> 
 
    but not enough! 
 
</div>

https://jsfiddle.net/azizn/021xqwo4/