溢出使 flexbox 无响应

Question

给弹性框元素添加溢出样式会使其无响应，下面是代码：

.projects-wrapper{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
  width: 95%;
  margin: 0 auto ;
  padding-bottom: 1rem;

}

.project {
  margin: 1rem;
  flex: 1 1 0;
  border-radius: 5%;
  background: rgb(189, 198, 209);
  transition: all 1s ease-out;
  cursor: pointer;
}

<div class="projects-wrapper">
    <div class="project">
        <img src="img/restaurantapi.png" alt="">
        <div class="project-title">
            <h1>Microservices-Based App</h1>
        </div>
        <div class="project-content">
            <p>
                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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
        </div>
        <span class="card-meta">
            <i class="fab fa-github fa-2x"></i>
        </span>
    </div>

    <div class="project">
        <img src="img/restaurantapi.png" alt="">
        <div class="project-title">
            <h1>Microservices-Based App</h1>
        </div>
        <div class="project-content">
            <p>
                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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
        </div>
        <span class="card-meta">
            <i class="fab fa-github fa-2x"></i>
        </span>
    </div>
</div>

每当我添加到 .project 类 overflow:hidden 时，flexbox 就会变得无响应。我不知道为什么，任何建议都值得赞赏。

编辑：我刚刚添加了一些 lorem ipsum 文本。

Answer 1

flex 开始“在移动设备上”换行的原因是，默认溢出时，布局引擎试图让所有内容都适合，而最宽的“单个不可破坏元素”是单词“微服务-”——如只要.project 的宽度小于该单词的宽度，就会发生换行，给您一种“响应式”的感觉。添加 overflow:hidden 后，您就是在告诉布局引擎，即使溢出的元素也可以被父级裁剪。

最好的解决方案是更明智地决定何时进行包装，例如决定为max-width: ...px 设置.project 的最大宽度。

如果您想获得与不使用 overflow:hidden 完全相同的行为 - 最长的单词会出现中断，请使用 min-width: min-content，如下所示：

.projects-wrapper{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
  width: 95%;
  margin: 0 auto ;
  padding-bottom: 1rem;

}

.project {
  margin: 1rem;
  flex: 1 1 0;
  border-radius: 5%;
  background: rgb(189, 198, 209);
  transition: all 1s ease-out;
  cursor: pointer;
  min-width: min-content;
  overflow: hidden;
}

<div class="projects-wrapper">
    <div class="project">
        <img src="img/restaurantapi.png" alt="">
        <div class="project-title">
            <h1>Microservices-Based App</h1>
        </div>
        <div class="project-content">
            <p>
                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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
        </div>
        <span class="card-meta">
            <i class="fab fa-github fa-2x"></i>
        </span>
    </div>

    <div class="project">
        <img src="img/restaurantapi.png" alt="">
        <div class="project-title">
            <h1>Microservices-Based App</h1>
        </div>
        <div class="project-content">
            <p>
                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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
        </div>
        <span class="card-meta">
            <i class="fab fa-github fa-2x"></i>
        </span>
    </div>
</div>