Причина, по которой 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>