Only one item's elements in flex row is selectable - html

Question

I'm learning React by starting to build a simple webpage (I know, overkill.) but I ran across a weird issue.
So I have three "bubbles" on my homepage each containing an icon, title, and text. I am using flex in their parent container to align them as a row but when I do this I can only select the title and text of the last "bubble".
If I choose flex-direction: column; (or if I don't set a direction) I am able to select the text of all three bubbles. If I choose: flex-direction: row; and flex-wrap: wrap; and then make the window smaller so one of the bubbles goes to the next line, I am able to select the text from 1/2 of the bubbles on line one and the text from the bubble on line two.
Also the :hover is no longer working in that last section of CSS code.
Been at this problem for a couple of days and it makes no sense to me. Thanks in advance for the help. See code below.
.home-services {
padding: 50px;
background-color: bisque;
transform: skewY(-3deg) translateY(-55px);
z-index: -1;
}
.home-bubbles {
display: flex;
flex-direction: row;
flex-wrap: wrap;
transform: skewY(3deg) translateY(50px);
width: 100%;
user-select: all;
z-index: -1;
}
.home-services-bubble {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
margin: 10px;
padding: 10px 30px;
background-color: #ffffff;
border-radius: 10px;
box-shadow: 2px 3px #ddd;
width: 29%;
}
.bubble-icon {
display: flex;
justify-content: center;
align-items: center;
background-color: #f64a01;
height: 100px;
width: 100px;
font-size: 3vw;
text-align: center;
border-radius: 100px;
color: #ffffff;
}
.home-services-bubble:hover .bubble-icon {
transform: translateY(-5px);
background-color: black;
box-shadow: 2px 3px #ddd;
transition: 0.5s;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" rel="stylesheet"/>
<div class="home-services">
<div class="home-bubbles">
<div class="home-services-bubble">
<div class="bubble-icon">
<i class="fas fa-search fa-2x"></i>
</div>
<div class="bubble-title">
<h2>Lorem ipsum dolor</h2>
</div>
<div class="bubble-text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="home-services-bubble">
<div class="bubble-icon">
<i class="fas fa-wind fa-2x"></i>
</div>
<div class="bubble-title">
<h2>Lorem ipsum dolor</h2>
</div>
<div class="bubble-text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="home-services-bubble">
<div class="bubble-icon">
<i class="fas fa-sign fa-2x"></i>
</div>
<div class="bubble-title">
<h2>Lorem ipsum dolor</h2>
</div>
<div class="bubble-text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
</div>

Answer 1

The user-select property with the value all selects the whole text on a simple click. Just remove it like this:
.home-bubbles {
display: flex;
flex-direction: row;
flex-wrap: wrap;
transform: skewY(3deg) translateY(50px);
width: 100%;
z-index: -1;
}