Question

在flexbox元素中添加溢出样式会使它无响应，下面是代码：

.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之所以开始“移动”包装的原因是，在默认溢出的情况下，布局引擎会尝试使所有内容适合，而最宽的“单个不可破坏元素”是“ Microservices-”一词-一旦.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>

溢出使Flexbox无法响应

1 个答案: