fietur: <details> viewportabhängig öffnen oder schließen

Beitrag lesen

was für eine Art von Grid verwendest Du da?

CSS Grid-Layout zieht die details-Elemente per Default auf die Größe der Grid-Zelle.

Ja, ein CSS Grid. Z.B. für 2 Spalten:

section { display:grid; grid-template-columns: 1fr 1fr; }

Und weil die Größe der enthaltenen Container <article> nicht festgelegt wird, berechnet der Browser sich die Spaltenbreite aus dem, was angezeigt wird. Der Wert des breitesten Containers bestimmt, wie breit die Zellen werden. Allerdings nur nach dem, was tatsächlich sichtbar ist. Bei etwas wie

<section>
  <article>
   <details closed>
     <summary>mehr</summary>
     Inhalt (aufgeklappt), breit genug für Zeilenumbrüche
   </details>
  </article>
  /* weitere article mit größerer Breite */
</section>

wird nur die Breite von "mehr" verwendet. Sind andere Zellen der Spalte breiter, wird der gezeigte article zu schmal.