Overflow makes flexbox unresponsive - css

Question

Adding overflow style to a flexbox element makes it unresponsive, below is the code:
.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>
Whenever I add to the .project class overflow:hidden, flexbox becomes unresponsive. I am not sure why, any suggestions are appreciated.
Edit: I just added some lorem ipsum text.

Answer 1

The reason why the flex starts to wrap "on mobile" is that with default overflow the layout engine tries to have all of the content fit, and the widest "single non breakable element" is the word "Microservices-" - as soon as the width of the .project is less than the width of that word then the wrapping occurs, giving you a "responsive" feel. Once you add overflow:hidden you are telling the layout engine that even overflowing elements can be clipped by the parent.
The best solution would be a more conscious decision on when the wrapping should occur, e.g. decide that for max-width: ...px the max width of the .project should be set.
If you want to have the exact same behavior as without the overflow:hidden - the break would occur on the longest word, then use min-width: min-content, as shown below:
.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>