どのように私の要素を互いに独立してホバーすることができますか？

Question

なぜこれらのブロックはホバー上でお互いに依存しますか？どのように私はそれらを独立してホバーにすることができますか？今のところ、最初のlist__itemは2番目の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

これが原因フレックス項目のデフォルトの動作であり、彼らがクロス軸に沿っをフレックスコンテナを埋めるためにストレッチ可能align-items: stretch、であり、すべてののフレックス品目の高さはの高さで表されます。です。ちょうどそれがあるとして、その後彼らの高さを維持するであろう、flex-startに値を変更することを防止するために、そう

：

.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>