Установите высоту контейнера сетки с двумя столбцами на высоту маленького столбца, в то время как другой столбец прокруч ⇐ CSS

[Anonymous]

У меня есть контейнер сетки, который имеет 2 столбца с различным содержанием внутри. Я хочу, чтобы оба столбца имели одинаковую высоту, но эта высота должна быть высотой меньшей колонки, а не более крупной колонны. У более крупной столбцы будет прокрутка, поэтому мы можем прокрутить его содержание. Простая демонстрация, как показано ниже: < /p>

Код: Выделить всё

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dicta, illo eum natus sapiente, ipsa expedita necessitatibus, officiis quam ducimus maiores esse libero magni illum eligendi dignissimos ut. Placeat, quam animi.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam ratione neque similique aperiam aut ut officiis. Repellendus, optio. Dolorum eaque corporis natus. Praesentium reiciendis, tenetur incidunt deserunt obcaecati accusamus sunt?
Velit, recusandae nesciunt? Minus accusantium placeat illum magnam, est neque doloribus possimus iure deserunt ipsa ab. Atque placeat hic ab sequi ratione omnis est laudantium, ea aut quaerat. Quasi, fuga.
Modi, nemo necessitatibus aliquam repellendus inventore officia quia voluptatum distinctio possimus provident consectetur quod ipsam excepturi tempora recusandae, soluta magnam consequuntur hic in cupiditate corrupti! Harum incidunt porro ut modi?
Hic molestiae obcaecati, quaerat libero adipisci, accusamus ab reprehenderit necessitatibus alias assumenda veniam incidunt, facilis consequuntur quos nostrum corrupti quia debitis ullam dolores tenetur eum! Ipsam rem sed ut dolores.
Quibusdam natus id doloremque ipsa ipsam voluptatem dolores facilis maiores excepturi atque accusamus autem aspernatur omnis, ut quisquam cumque. Debitis ex commodi accusamus quaerat architecto obcaecati laborum error maxime assumenda.
Aperiam vero nesciunt cupiditate, suscipit iusto fuga pariatur? Error consequatur iste fugit numquam id repellendus consequuntur quia tempora expedita harum corrupti veritatis molestiae quos veniam, amet et, voluptatem asperiores officiis.
Soluta nesciunt enim saepe, minus vel iste dignissimos minima, architecto perspiciatis fugiat incidunt numquam blanditiis similique cupiditate culpa alias quasi amet! Aperiam magnam autem consequatur laboriosam nemo ex ipsa ipsam?
Necessitatibus aspernatur officia fugit asperiores cumque veritatis. Quas repellendus nesciunt temporibus a commodi reiciendis quasi fuga magnam obcaecati debitis eum illum nam dolore repellat dolorem doloribus, ullam quos molestiae voluptatem?
Aperiam similique reiciendis saepe laboriosam. Ipsa eaque, molestias ullam, temporibus corporis omnis repudiandae accusamus consequatur quaerat a at quod praesentium nobis deserunt pariatur perspiciatis tempore voluptates est nesciunt error iure.
Delectus iure illo autem eligendi perferendis vitae voluptatibus doloribus pariatur velit recusandae, culpa officiis accusamus mollitia quas nam aliquid praesentium commodi amet esse! Quos velit ratione dicta similique! Consequatur, ex?


< /code>
* {
box-sizing: border-box;
}

.grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
height: min-content;
}

.short {
border: 4px dotted red;
}

.long {
border: 4px solid blue;
overflow: auto;
}

Я попытался настройки высоты: min-content в контейнер сетки, но он не работает.
Я нашел решение во время написания Этот вопрос, который является https://stackoverflow.com/a/29629924/29315733. Но это решение больше похоже на взломать, а не правильное решение .>

Подробнее здесь: https://stackoverflow.com/questions/793 ... lumn-while