Stellen Sie die Höhe des zwei Säulengitterbehälters auf die Höhe der kleinen Spalte ein, während die anderen Spalten -Sc ⇐ HTML

[Guest]

Ich habe einen Gitterbehälter, der 2 Spalten mit unterschiedlichem Inhalt enthält. Ich möchte, dass beide Spalten gleich hoch sind, aber diese Höhe sollte die Höhe der kleineren Säule und nicht die größere Säule sein. Die größere Spalte verfügt über eine Scroll -Leiste, damit wir den Inhalt dessen ansehen können. Eine einfache Demo ist wie unten: < /p>

Code: Select all

* {
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;
}< /code>


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?

Ich habe versucht Container, aber es funktioniert nicht. Diese Lösung fühlt sich jedoch eher wie ein Hack als wie eine richtige Lösung an.>