Chrome中SVG溢出父容器但Firefox正常的CSS修复咨询

我在frontendmentor.io练习HTML时遇到浏览器兼容问题：页面中的SVG元素在Firefox中显示正常（符合预期效果），但在Chrome和Brave中会溢出其父容器。以下是实现该效果的代码，需要修改哪些CSS代码才能让效果在Chrome系浏览器中也正常显示？

HTML代码 #

<main class="wrapper">  
  <section class="cards-container">
    <section class="cards">  
      <article>
         <h2>Grow Together</h2>
         <p>
         Generate meaningful discussions with your audience and build a strong, loyal community.Think of the insightful conversations you miss out on with a feedback form. 
        </p>
      </article>
      <img class="svg-body" src="./images/illustration-grow-together.svg" alt="Customers using app">
    </section>
    <section class="cards"> 
      <img  class="svg-body" src="./images/illustration-flowing-conversation.svg" alt="Conversation by a tree">
      <article>
        <h2>Flowing Conversations</h2>
        <p>
          wouldn't paginate a conversation in real life, so why do it online? Our threads have just-in-time loading for a more natural flow.
        </p>
      </article>
    </section>

CSS代码 #

.cards-container{
    margin-top: 10rem;
    margin-bottom: 10rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 3rem;
}
.cards{
    display:flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 25px;
    box-shadow: 0px 0px 5px 4px rgba(0,0,0,0.26);
    max-height: 30rem;
}
.cards article{
    padding: 4rem;
    width: 80%;
}
.cards article h2{
    font-size: 2em;
}
.svg-body{
    padding: 4rem;
    max-width: 50%; 
    height: auto;
}

修复方案 #

问题源于Chrome系浏览器对flex容器内元素的尺寸计算逻辑差异，以下是具体修改点：

1. 给.cards容器添加明确宽度约束
   Chrome系下flex容器若无明确宽度，内部元素尺寸易超出预期。给.cards添加宽度限制，确保容器边界清晰：

   .cards{
       /* 保留原有样式 */
       width: 100%;
       max-width: 1200px; /* 可根据设计需求调整数值 */
   }
   

2. 调整.cards article的宽度规则
   当前width: 80%会挤压SVG空间，且与SVG的max-width:50%冲突。改用flex:1让article与SVG平分容器空间，同时添加最小宽度保证小屏幕可读性：

   .cards article{
       padding: 4rem;
       flex: 1; /* 替换原width:80% */
       min-width: 300px;
   }
   

3. 优化.svg-body的尺寸计算
   添加box-sizing: border-box让padding包含在宽度内，同时设置flex-shrink:0防止SVG被过度压缩：

   .svg-body{
       padding: 4rem;
       max-width: 50%; 
       height: auto;
       box-sizing: border-box;
       flex-shrink: 0;
   }
   

4. 移除或调整.cards的max-height（可选）
   固定max-height:30rem可能导致内容溢出，建议移除该约束让容器自适应高度，或根据实际内容调整合理数值。

修改后的完整CSS示例：

.cards-container{
    margin-top: 10rem;
    margin-bottom: 10rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 3rem;
}
.cards{
    display:flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 25px;
    box-shadow: 0px 0px 5px 4px rgba(0,0,0,0.26);
    width: 100%;
    max-width: 1200px;
}
.cards article{
    padding: 4rem;
    flex: 1;
    min-width: 300px;
}
.cards article h2{
    font-size: 2em;
}
.svg-body{
    padding: 4rem;
    max-width: 50%; 
    height: auto;
    box-sizing: border-box;
    flex-shrink: 0;
}

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