CSS inline/inline-block元素折行时边框盒拉伸宽度异常问题

这个问题和inline-block/inline元素本身的换行渲染逻辑无关，核心是纵向flex容器的默认拉伸规则：

• 当容器设置display: flex且flex-direction: column时，交叉轴（水平方向）的默认对齐属性是align-items: stretch，会强制所有直接子元素宽度撑满父容器的可用宽度。
• 你给<h3>设置的display: inline-block本身是具备「宽度贴合内容」特性的，但父级的stretch规则会改变它的可用宽度：文本长度较短无需换行时，元素的固有收缩特性会让它看起来贴合内容；一旦文本长度达到需要换行的阈值，元素会先被拉伸到父容器100%宽度，再在这个宽度范围内完成文本折行，最终表现为边框、背景撑满整列。
• 你代码里写的align-items: flex-start没有生效，是因为实际使用的Chakra Stack组件自带的默认stretch样式优先级更高，覆盖了你自定义的属性。

两种写法都可以实现边框始终贴合文本宽度的效果，选一种即可：

• 给flex列容器显式设置交叉轴对齐属性，覆盖默认的stretch规则：

  .css-1yejq71 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  

• 直接给<h3>元素单独设置自身对齐规则，不影响容器内其他元素：

  .css-1yejq71 h3 {
    /* 保留原有字号、颜色、内边距、圆角、inline-block等样式 */
    align-self: flex-start;
  }
  

设置完成后，<h3>的宽度不会再被强制拉伸为父容器100%，会自动收缩到适配内容的宽度：单行文本时刚好贴合文字长度，多行文本时宽度等于折行后最长一行文本的宽度，背景、边框会完全贴合内容，和预期效果一致。

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