Запретить ребенку предполагать полную ширину динамов c ширина родителя

Question

У меня есть контейнер, и ширина этого контейнера определяется либо max-width, либо width его самого широкого дочернего элемента.

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

В приведенном ниже примере, как сделать элементы abc, выделенные limegreen границы, только ширины их содержимого (например, abc)?

#container {
  display: inline-block;
box-sizing: border-box;
border: solid orange 2px;
}

.child {
box-sizing: border-box;
border: solid limegreen 2px;
}

<div id='container'>
  <div class='child'>abcdefghi</div>
  <div class='child'>abc</div>
  <div class='child'>abc</div>
</div>

Answer 1

макет flexbox сделает работу

#container {
  display: inline-flex;
  flex-direction: column;
  align-items:flex-start; /* OR flex-end */
  border: solid orange 2px;
}

.child {
  border: solid limegreen 2px;
}

<div id='container'>
  <div class='child'>abcdefghi</div>
  <div class='child'>abc</div>
  <div class='child'>abc</div>
</div>

Или display:table:

#container {
  display: inline-block;
  border: solid orange 2px;
}

.child {
  border: solid limegreen 2px;
  display:table;
  /* margin-left:auto to push to the right */
}

<div id='container'>
  <div class='child'>abcdefghi</div>
  <div class='child'>abc</div>
  <div class='child'>abc</div>
</div>

Даже float сделает свою работу:

#container {
  display: inline-block;
  border: solid orange 2px;
}

.child {
  border: solid limegreen 2px;
  float:left;
  clear:left;
  /* OR right for both */
}

<div id='container'>
  <div class='child'>abcdefghi</div>
  <div class='child'>abc</div>
  <div class='child'>abc</div>
</div>

Answer 2

Сделано .child width: fit-content;

#container {
  display: inline-block;
  box-sizing: border-box;
  border: solid orange 2px;
  direction: rtl;
}

.child {
  box-sizing: border-box;
  border: solid limegreen 2px;
  width: fit-content;
}

<div id='container'>
  <div class='child'>abcdefghi</div>
  <div class='child'>abc</div>
  <div class='child'>abc</div>
</div>