Wie respektiert man beim Ausbrechen aus dem Container andere Elemente? ⇐ CSS

[Anonymous]

Ich habe ein Layout mit zwei Spalten, wobei die rechte Spalte Text und eine Überschrift enthält. Der Header sollte auch die Möglichkeit haben, entweder in seiner Spalte zu bleiben oder sich über beide Spalten zu erstrecken, und ich verwende Grid-Stacking, um dies zu erreichen.
Allerdings stoße ich auf ein Problem, bei dem der Inhalt in der rechten Spalte und in der Überschrift die Grenzen des jeweils anderen nicht respektiert, wie bei absoluten. Was ich jetzt mache, ist, die Höhe des Textcontainers vom Inhaltscontainer zu subtrahieren, aber ich frage mich, ob es einen besseren Ansatz für diese Art von Layout gibt?
Keine Sorge, die magische Nummerierung dient nur der Veranschaulichung der Idee, ich würde bei Bedarf einen dynamischeren Ansatz verwenden.
Was ich bisher habe:

Code: Select all

body {
height: 100vh;
}

.grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
height: 100%;
outline: 2px solid blue;
}

.flex-parent {
display: flex;
grid-column: -1 / 1;
grid-row: -1 / 1;
}

.left {
flex-basis: 100%;
background: red;
}

.right {
flex-basis: 100%;
background: yellow;
box-sixing: border-box;
}

.right__inner {
display: flex;
height: calc(100% - 100px);
align-items: flex-end;
}

.text-container {
grid-column: -1 / 1;
grid-row: -1 / 1;
align-self: end;
opacity: 0.8;
background: white;
}

Code: Select all

Hello this is some text




Heading