设置display:flex与width:100%后ul容器无法占满父元素宽度问题

问题描述 #

设置了display: flex的ul容器（.aboutus-card-container）期望占满父元素100%宽度，但屏幕尺寸缩小后，容器无法维持满宽，卡片出现重叠；移除display: flex后宽度表现正常。

相关代码 #

CSS代码

.aboutus-container {
  background-color: #EDF2E7;
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
}

.aboutus-content {
  display: flex;
  width: 90%;
}

.aboutus-text {
  width: 50%;
  display: flex;
  flex-direction: column;
  padding: 20px;
}

.aboutus-photo-container {
  width: 50%;
}

.aboutus-photo-container img {
  width: 100%;
  height: 100%;
}

.aboutus-card {
  list-style: none;
  display: flex;
  flex-direction: column;
  background-color: #7FA154;
  padding: 24px;
  border-radius: 10px;
  justify-content: center;
  align-items: center;
}

.aboutus-card-container {
  display: flex;
  padding-left: 0;
  gap: 15px;
  width: 100%;  /* Ensure full width */
  box-sizing: border-box;  /* Include padding and border in width */
}

HTML代码

<section class='aboutus-container'>
  <div class='aboutus-content'>
    <div class='aboutus-text'>
      <h1>Sobre Nosotros</h1>
      <h3>Algun texto aca </h3>
      <p class='about-us-legend'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
      <ul class='aboutus-card-container'>
        <li class='aboutus-card'>
          <div class='about-us'>
            <p>Años de experiencia</p>
          </div>
        </li>
        <li class='aboutus-card'>
          <div class='about-us'>
            <p >Unidades construidas</p>
          </div>
        </li>
        <li class='aboutus-card'>
          <div class='about-us'>
            <p>calidad en nuestros <span style="display: block">procesos</span></p>
          </div>
        </li>
      </ul>
    </div>
    <div class='aboutus-photo-container'>
      <img src="" alt="" />
    </div>
  </div>
</section>

问题原因 #

1. Flex容器默认带有flex-shrink: 1属性，当父元素空间不足时，容器会自动收缩，无法维持100%宽度
2. 子元素卡片未设置合适的flex属性，空间不足时无法正确分配宽度，导致重叠
3. 未给flex容器添加flex-wrap: wrap，卡片总宽度超过容器时无法自动换行

解决方案 #

核心修复代码

调整.aboutus-card-container和.aboutus-card的CSS属性：

.aboutus-card-container {
  display: flex;
  padding-left: 0;
  gap: 15px;
  width: 100%;
  box-sizing: border-box;
  flex-wrap: wrap; /* 空间不足时自动换行 */
}

.aboutus-card {
  list-style: none;
  display: flex;
  flex-direction: column;
  background-color: #7FA154;
  padding: 24px;
  border-radius: 10px;
  justify-content: center;
  align-items: center;
  flex: 1 1 calc(33.333% - 10px); /* 分配宽度，允许收缩和扩展 */
  min-width: 200px; /* 可选，设置最小宽度避免卡片过窄 */
}

小屏幕布局优化（可选）

添加媒体查询，让整体布局在小屏幕下垂直排列，避免卡片与图片重叠：

@media (max-width: 776px) {
  .aboutus-content {
    flex-direction: column;
  }
  .aboutus-text, .aboutus-photo-container {
    width: 100%;
  }
}

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