如何让CSS元素宽度由内容而非父容器决定？

问题根源在于：.parent 通过 flex-grow: 1 占满了 .nav 的全部可用宽度，而 .child 作为默认的块级元素，会自动撑满父元素 .parent 的宽度，所以看不到 .parent 的蓝色背景。要让 .child 仅根据内容自适应宽度，同时显示 .parent 的蓝色，有两种简单实现方式：

方法一：修改 .child 的显示模式 #

给 .child 设置 display: inline-block 或者 display: inline-flex，让它从块级元素变为行内块元素，宽度由内容决定：

修改后的 CSS 代码：

.nav {
  width: 100%;
  background: red;
  display: flex;
}

.parent {
  background: blue;
  flex-grow: 1
}

.child {
  background: yellow;
  display: inline-block; /* 或者 inline-flex */
}

方法二：把 .parent 设为 Flex 容器 #

给 .parent 添加 display: flex，Flex 子项默认不会撑满父容器宽度（除非设置 flex-grow），这样 .child 会自动适配内容宽度，同时 .parent 依然通过 flex-grow: 1 占满 .nav 的宽度，蓝色背景自然显现：

修改后的 CSS 代码：

.nav {
  width: 100%;
  background: red;
  display: flex;
}

.parent {
  background: blue;
  flex-grow: 1;
  display: flex; /* 添加这一行 */
}

.child {
  background: yellow;
}

两种方法都能实现需求，不需要设置任何固定宽度，完全由内容动态决定 .child 的宽度。

内容的提问来源于stack exchange，提问作者Islam Y-