Ist nachfolgendes layout realisierbar

[Rolf B]

Hallo Gunnar,

Der könnte in seine Einzelzelle eingesperrt werden. Gridzellen können sich überlappen.

Hatte ich auch schon überlegt, aber dann hätte man ein div im HTML das nur für die Darstellung des Viertelkreises da ist. Gefällt mir nicht.

Aber ich verfolge gerade eine andere Idee:

body {
  display: grid;
  grid: "logo head" auto
        "logo cont" 3em
        "logo main" 3em
        "nav  main" 1fr
       / 10em 1fr;
  gap: 0 2em;
  /* rem, nicht em, die Umsetzung erfolgt mit der font-size der Stelle wo
     die Variable benutzt wird! */
  --main-left: 3rem;
}
/* Eingefügt nach Matthias' Hinweis */
body::before {
  content: " ";
  grid-area: cont-start / cont / main-end; /* row-start, column, row-end */
  background-color: #fed;
  border-radius: calc(var(--main-left) * 3) 0 0 0;
}

#inhalt {
  grid-area: cont;
  border-radius: calc(var(--main-left) * 3) 0 0 0 ;
}

main {
  grid-area: main;
  overflow-y: scroll;
  padding-left: var(--main-left);
}

Auf diese Weise geht der Inhaltsteil bis ganz unten und spendiert auch die Hintergrundfarbe für den main-Teil. Man muss dann nur mit den dort platzierten Wörtern aufpassen, dass sie nicht in den Textteil hineinragen.

Matthias hatte die bessere Idee: Das ::before-Element erzeugt Hintergrundfarbe und Rundung, die Inhalte kümmern sich nur um sich selbst.

Guckst Du: https://jsfiddle.net/Rolf_b/6h9vuwkg/

Womit ich gerade streite, ist die Zentrierung von "...Inhaltsteil..." und "Titel" mit exakt gleicher Mitte. Das ist schwierig, weil der Titel aus meiner Sicht zum blablabla Inhalt gehört, d.h. im scrollbaren Bereich liegt. Damit ist es um eine Scrollbarbreite schmaler als der Inhaltsbereich, der nicht im Scrollbar-Bereich liegt. Eine Scrollbarbreite in Default-Windows sind 17px, deswegen habe ich experimentell mal 6px bei der Padding-Berechnung abgezogen, aber das ist garantiert kein fixierter Wert. Hinzu kommt, dass bei kurzem Text der Scrollbar gar nicht da ist (wenn ich overflow-y auf auto statt auf scroll setze).

Die Rechnerei ist eh schon nicht trivial. Ich möchte "...Inhaltsteil..." mittig haben, und die "..." Bereiche rechts davon. Dafür mache ich ein Grid, und setze ein Padding für's erste Drittel. Die 33.3% beziehen sich aber auf die gesamte Breite des Main, incl. Padding, darum muss ich ein Drittel von (100% - var(--main-left)) bestimmen. Ausmultiplizieren führt dann zu dieser 2/3 Rechnung im Fiddle.

Es ist vermutlich für die Verständlichkeit des CSS am besten, auf diese genaue Positionierung zu verzichten. Oder den "Inhaltsteil" tatsächlich ins main zu legen und mit sticky oben anzukleben. Ich hätt's ja schöner gefunden, wenn der separat ist und der Scrollbar tatsächlich nur neben dem scrollbaren Teil ist.

Rolf