Zeilenüberlauf im CSS -Gitter mit Überlauf: Scroll; ⇐ CSS

[Anonymous]

Mein Gitter sieht so aus, als wäre dies gleich, anstatt alle Spalten gleich zu haben. < /p>

Code: Select all

  grid-template-columns: repeat(10, minmax(0,1fr));
grid-template-rows: repeat(var(--rowNumber),minmax(0,1fr));

Mit einem anderen Element ist es kürzer und es gibt auch Zeile 2, aber es ist noch zu lang. minmax (0,10vh) anstelle von nur 1fr in der Rasterzeile und der Spalte "Deklaration", aber es hat auch nichts getan. Außerdem half eine KI nicht. Es ist auch viel länger als Erweiterung, als die Polsterung und Lücken verursachen könnten. Ich bin auf Sachen gestoßen, wie ich in einem CSS -Netz scrollen kann? Aber ich habe schon alles ausprobiert.

Code: Select all

:root {
--boxW: 80vw;
--boxH: 300vh;
--rowNumber: 30;
--boxMargin: calc(calc(100vw - var(--boxW)) /2);
}

.parent {
background-color: #CC55AA;
height: var(--boxH);
width: calc(var(--boxW)-6vw);
margin-inline: var(--boxMargin);
margin-block: 10vh;
padding-block: 7vh;
padding-inline: 3vw;

display: grid;
gap: 10vw;

grid-template-columns: repeat(10, minmax(0, 1fr));
grid-template-rows: repeat(var(--rowNumber), minmax(0, 1fr));
gap: 3vh;
}

.child {
background-color:#FCF0F7;
padding-inline: 6vw;
padding-block: 6vh;
overflow: scroll;

min-width: 0;
min-height: 0;
max-height: 2fr;

}

.child1 {
grid-column-start: 1;
grid-column-end: 6;
grid-row-start: 1;
grid-row-end: 2;

}< /code>


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ut vestibulum magna. Vestibulum ullamcorper enim molestie, elementum massa id, vulputate.