Flex容器为何小于内容？如何让容器与子元素同宽高？

嘿，我来帮你搞定这个容器尺寸不匹配的问题！你遇到的核心问题其实有两个：一是容器默认会占满父元素宽度，不会自动收缩到子元素的宽度；二是绝对定位的伪元素脱离了文档流，导致容器没把它的高度算进去。咱们一步步来调整：

问题分析 #

1. 容器宽度不匹配：默认的块级元素（比如你的.text-container和.heading-container）宽度会继承父容器的100%，哪怕子元素更窄，所以看起来容器比内容宽。
2. 容器高度缺失：.label:after用了绝对定位，这种元素会脱离文档流，.text-container计算高度时不会把这个黄色标签尾巴算进去，导致容器高度比实际内容矮。

解决方案 #

1. 让容器宽度匹配子元素

给需要收缩到内容宽度的容器添加width: fit-content，这个属性会让容器自动适配子元素的宽度，是现代浏览器的首选方案。如果要兼容更老的浏览器，也可以用display: inline-block或者display: table。

2. 包含绝对定位伪元素的高度

因为标签尾巴是绝对定位的，咱们给.text-container添加足够的padding-bottom，值等于伪元素的高度（这里是19px，对应你代码里的margin-bottom: -19px），这样容器就会把尾巴的高度包含进去。

修改后的完整代码 #

.label { 
  padding: 3px 8px; 
  background-color: #fbfb2f; 
  display: inline-block; 
  position: relative; 
  font-size: 10px; 
  line-height: 20px; 
}
.label:after { 
  content: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1774776/Yellow_Tag_Tail.svg"); 
  position: absolute; 
  bottom: 0; 
  left: 37%; 
  margin-bottom: -19px; 
}
h2 { 
  font-size: 72px; 
  line-height: 0.1; 
  max-width: 182px; 
  margin-top: 42px; 
}
.u-padding-left { padding-left: 20px; }
.u-center { 
  display: flex; 
  flex-direction: column; 
  justify-content: center; 
  align-items: center; 
  height: 100vh; 
}
/* 新增的关键样式 */
.text-container {
  width: fit-content;
  padding-bottom: 19px; /* 包含标签尾巴的高度 */
}
.heading-container {
  width: fit-content;
}

<div class="u-center">
  <div class="text-container">
    <div class="label">Take Your Pick!</div>
    <div class="heading-container">
      <h2>Subscribe,</h2>
      <h2 class="u-padding-left">Simplify</h2>
    </div>
  </div>
</div>

额外说明 #

• 如果width: fit-content在某些旧浏览器不生效，你可以把width: fit-content换成display: inline-block，效果类似，但要注意inline-block会带来额外的空白，你可以通过父容器设置font-size: 0或者容器间不留空格来解决。
• 关于padding-bottom的数值，你可以根据伪元素的实际高度调整，确保刚好能包含那个标签尾巴就行。

内容的提问来源于stack exchange，提问作者cklein23