Есть grid сетка. Хочу, чтобы карточка с классом scrolled была высотой не более чем остальные карточки и чтобы в ней был вертикальный скролл (высота блока scrolled должна быть динамическая относительно других карточек в гриде, то есть не должна растягивать другие карточки по высоте). Как такое сделать без костылей?
body {
padding: 20px;
color: #332182;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 20px;
}
.item {
padding: 1.35rem;
background: #90bcbc;
border-radius: 4px;
}
h3 {
font-size: 2rem;
margin-bottom: 0.5rem;
}
.scrolled {
overflow-y: scroll;
}
<div class="grid">
<div class="item">
<h3>Card 1</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi expedita veritatis quibusdam quas facilis soluta deserunt aliquid molestias unde culpa. Voluptatibus doloribus doloremque harum ratione?</p>
</div>
<div class="item">
<h3>Card 2</h3>
<p class="scrolled">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quas eligendi itaque odio aliquid excepturi vel corrupti deserunt veniam fuga perspiciatis! Nihil obcaecati quos similique consequatur dolore. Natus, corrupti.Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quas eligendi itaque odio aliquid excepturi vel corrupti deserunt veniam fuga perspiciatis! Nihil obcaecati quos similique consequatur dolore. Natus, corrupti.Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quas eligendi itaque odio aliquid excepturi vel corrupti deserunt veniam fuga perspiciatis! Nihil obcaecati quos similique consequatur dolore. Natus, corrupti.</p>
</div>
<div class="item">
<h3>Card 3</h3>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Pariatur corporis porro mollitia praesentium quis minus.</p>
</div>
</div>