How can I make my elements hover independently of one another? - html

Question

Why do these blocks depend on each other on hover? How can I make them hover independently? As of now, the first list__item depends on the second list__item.
.list {
display: flex;
flex-wrap: wrap;
align-items: stretch;
margin: 0;
padding: 0;
}
.list__item {
background: none;
border: 1px solid grey;
list-style: none outside;
display: flex;
flex-direction: column;
justify-content: center;
width: 23.72%;
margin: 0 0 20px 1.7%;
word-wrap: break-word;
}
.list__item:hover .list__descr {
display: block;
}
.list__name {
font-size: 14px;
color: #333;
font-weight: 700;
line-height: 1.286;
padding: 20px 8px;
height: 73px;
}
.list__descr {
display: none;
padding: 0 8px;
font-size: 12px;
color: #505050;
}
.list__descr-more {
font-size: 11px;
color: #787878;
line-height: 1.909;
padding-left: 10px;
padding-bottom: 10px;
}
<ul class="list">
<li class="list__item">
<div class="list__img">
</div>
<div class="list__title">
Lorem ipsum dolor sit amet, consectetur.
</div>
<p class="list__descr">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, pariatur! Quasi sed eaque praesentium ea odio voluptatibus repudiandae commodi, ut cupiditate perferendis voluptate provident, nobis ullam doloribus accusantium omnis perspiciatis.</p>
<div class="list__descr-more">Lorem ipsum dolor.</div>
</li>
<li class="list__item">
<div class="list__img">
</div>
<div class="list__title">
Lorem ipsum dolor sit amet, consectetur.
</div>
<p class="list__descr">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, pariatur! Quasi sed eaque praesentium ea odio voluptatibus repudiandae commodi, ut cupiditate perferendis voluptate provident, nobis ullam doloribus accusantium omnis perspiciatis.</p>
<div class="list__descr-more">Lorem ipsum dolor.</div>
</li>
</ul>

Answer 1

This is because of the align-items: stretch, which is by default and makes flex-items stretch to fill the flex-container along the cross axis, where their height is dictated by the height of the "tallest" one.
So in order to prevent that just change the value to flex-start, which will then preserve their height as it is:
.list {
display: flex;
flex-wrap: wrap;
align-items: flex-start; /* modified */
margin: 0;
padding: 0;
}
.list__item {
background: none;
border: 1px solid grey;
list-style: none outside;
display: flex;
flex-direction: column;
justify-content: center;
width: 23.72%;
margin: 0 0 20px 1.7%;
word-wrap: break-word;
}
.list__item:hover .list__descr {
display: block;
}
.list__name {
font-size: 14px;
color: #333;
font-weight: 700;
line-height: 1.286;
padding: 20px 8px;
height: 73px;
}
.list__descr {
display: none;
padding: 0 8px;
font-size: 12px;
color: #505050;
}
.list__descr-more {
font-size: 11px;
color: #787878;
line-height: 1.909;
padding-left: 10px;
padding-bottom: 10px;
}
<ul class="list">
<li class="list__item">
<div class="list__img"></div>
<div class="list__title">
Lorem ipsum dolor sit amet, consectetur.
</div>
<p class="list__descr">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, pariatur! Quasi sed eaque praesentium ea odio voluptatibus repudiandae commodi, ut cupiditate perferendis voluptate provident, nobis ullam doloribus accusantium omnis perspiciatis.</p>
<div class="list__descr-more">Lorem ipsum dolor.</div>
</li>
<li class="list__item">
<div class="list__img"></div>
<div class="list__title">
Lorem ipsum dolor sit amet, consectetur.
</div>
<p class="list__descr">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, pariatur! Quasi sed eaque praesentium ea odio voluptatibus repudiandae commodi, ut cupiditate perferendis voluptate provident, nobis ullam doloribus accusantium omnis perspiciatis.</p>
<div class="list__descr-more">Lorem ipsum dolor.</div>
</li>
</ul>