防止子级采用动态宽度父级的全部宽度

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;
  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;
}

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

即使是浮点数也能胜任：

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

.child {
  border: solid limegreen 2px;
  float:left;
  clear:left;
}

<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;
}

.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>