1

Есть 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>

2 ответа 2

0

Возможное решение

Например, установить высоту параграфа

p {
    height: 100px;
}

Или сделать через max-height, но указав размеры для карточки

.grid {
    //...
    grid-auto-rows: 200px;
}

.item p {
    max-height: 90px;
}

И самый гибкий вариант с использованием flex

В этом случае также необходимо установить размеры карточки, либо grid-auto-rows как показано выше, либо через height у .item

.item {
    //...
    display: flex;
    flex-direction: column;
    height: 200px;
}

.item p {
    //...
    flex: 1;
}

Свойство flex: 1 будет заполнять все незанятое пространство блока c flex

1
  • Вот как раз height/max-height я и называл костылями. Мне бы хотелось, чтобы карточка была полностью резиновой: чтобы внешняя ее высота равнялась высоте самой высокой соседней карточки в строке, а внутренний скролл жил своей отдельной жизнью и никак не влиял на высоту блока, а просто заполнял его на 100% по высоте и ширине до соответствия высотам соседних карточек.
    – posix
    18 авг 2020 в 11:37
0

Вроде лучше не сделать. Ещё раз удостоверился в том, что верстка для веба - это просто набор костылей, подпертых другими костылями.

body {
  padding: 20px;
  color: #332182;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 20px;
}

.item {
  display: flex;
  flex-direction: column;
  padding: 1.35rem;
  background: #90bcbc;
  border-radius: 4px;
}

.scrolled {
  flex: 1;
  position: relative;
  overflow-y: auto;
  min-height: 100px;
}

.scrolled p {
  position: absolute;
}

h3 {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}
<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>
    <div class="scrolled">
      <p>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. Quas eligendi itaque odio aliquid excepturi vel corrupti deserunt veniam fuga perspiciatis! Nihil obcaecati quos similique consequatur dolore. Natus, corrupti.</p>
    </div>
  </div>
  <div class="item">
    <h3>Card 3</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur, iusto consectetur. Corporis consequatur architecto consequuntur blanditiis delectus sed aut, sint nihil ipsam voluptates quasi iure accusamus veniam quia soluta reprehenderit, quo quos!</p>
  </div>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.