为什么Flexbox布局在Safari 15和Chrome中无法正常工作？

• CSS语法错误：给出的.container4样式规则缺少闭合的}，不同浏览器对语法错误的容错解析逻辑不同，Firefox的容错机制会自动补全缺失的括号，而Safari、Chrome的解析逻辑会导致后续子元素的样式不生效或者解析异常，这是核心触发问题。
• Webkit内核Flex默认规则限制：Safari、Chrome使用的Webkit/Blink内核中，Flex子元素的min-width默认值为auto，当子元素内容的宽度大于设置的flex基础宽度时，子元素会自动撑开，不会遵守设置的flex-shrink收缩规则，导致布局错乱。
• 图片元素无尺寸限制：作为Flex子项的图片没有设置最大宽度约束，Safari对Flex容器内的图片尺寸计算逻辑和Firefox不同，会默认按图片原始尺寸渲染，直接溢出容器。

1. 先补全.container4的CSS闭合括号，修正语法错误
2. 给所有Flex子元素添加min-width: 0，覆盖默认的auto值，让收缩规则正常生效
3. 给图片元素添加max-width: 100%和height: auto，保证图片自适应容器尺寸，不会溢出
4. 可直接将容器的align-items设置为flex-start，不用单独给每个子元素加align-self: flex-start，精简代码

修复后CSS代码 #

.container4 {
  font-family: "Chakra Petch", sans-serif;
  font-size: 40px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 50px;
}

.element4 {
  padding-left: 50px;
  padding-top: 50px;
  flex: 1 1 300px;
  min-width: 0;
}

.element4-2 {
  padding-right: 50px;
  padding-top: 50px;
  flex: 1 1 300px;
  min-width: 0;
  max-width: 100%;
  height: auto;
}

修复后HTML代码（无需修改原有逻辑） #

<div class="container4">
  <p class="element4">
    Drummer and beat producer from Gothenburg, based in Oslo. The beats are
    built around Pers drumming, <br />
    using samples from a wide variety of genres <br />
    mixed with other sounds.
  </p>
  <img class="element4-2" src="../Images/galgeberg.png" alt="wall2" />
</div>

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