JSFiddle - React, Tailwind, and code Playground

CSS Grid равной высоты, с прокруткой

by Ankhena

HTML

<main>

  <div class="item d1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum cum nobis, est laudantium similique neque animi omnis iure, dignissimos molestiae quos ipsa quis praesentium ut ad et autem, delectus fugiat officia quas. Totam rem, autem, fugit soluta obcaecati voluptatum quia consequuntur veritatis, ullam magni ab, in similique possimus non ad molestiae beatae porro assumenda eum! Id quasi architecto iste repudiandae, quibusdam ea quo, quos quaerat doloremque sapiente blanditiis cum illo doloribus harum minima labore. Error vero animi incidunt aspernatur culpa. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam quis mollitia molestias impedit! Ad suscipit necessitatibus minima nulla provident numquam alias possimus! Quam illo, quas! Aliquid unde, quae laboriosam, consectetur commodi ipsam adipisci, vero error sequi incidunt ipsa reiciendis mollitia cupiditate quisquam dignissimos iusto minus necessitatibus eaque itaque, veniam nihil. Porro beatae nostrum nulla distinctio, iste dignissimos dolorem facere ducimus, sit voluptatum sapiente modi earum est maxime, harum. Sapiente quisquam beatae ullam amet. Minus autem culpa quasi, neque, debitis aperiam. Incidunt libero autem facilis illum dolorem corporis deleniti consequatur sapiente voluptatem, magnam nobis eveniet! Iure vitae, voluptas atque mollitia enim.</div>
  <div class="item d2">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum, magnam. Id, quam saepe nesciunt distinctio temporibus hic tempora ipsum, officiis unde, sunt, dignissimos cumque quasi sapiente corporis natus totam? Hic consequuntur suscipit officiis. Minus quisquam nesciunt voluptas repudiandae, blanditiis non error fugit cum incidunt assumenda voluptates, inventore, commodi natus tempora eligendi et. Veritatis, pariatur ratione, velit ipsam molestiae amet at illo, inventore recusandae laudantium vero ab nihil repellat perferendis accusantium sint! Blanditiis molestias eveniet...

CSS

* {
  box-sizing: border-box
}

html,
body {
  height: 100%;
  padding: 20px;
  margin: 0;
}

main {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: fit-content(0);

  padding: 20px;
  background: #eee;
}

.item {
  padding: 5px;
  border-radius: 5px;
  background: #57c5db;

}

.d1 {
  grid-column: 1;
  overflow-y: auto;

}

.d2 {
  grid-column: 2;
}