Höhe eines Flexbereichs

[Rolf b]

Hallo zusammen,

ich rätsele gerade an Folgendem herum. Meine HTML soll eine n-fache Wiederholung folgender Grundstruktur enthalten:

<section>
<article class="formatiert">
</article>
<article class="raw">
</article>
</section>

Von diesen Sections will ich eine ganze Menge erzeugen, der linke article enthält eine formatierte Darstellung, der rechte article die Rohdaten (zum Vergleich, ob die formatierte Darstellung den Wünschen entspricht). Per Flexbox setze ich die beiden Articles nebeneinander.

Mein Problem: Die Höhe jeder einzelnen Section soll durch die formatierte Darstellung bestimmt werden, also durch die inhaltsabhängige Höhe des article.formatiert. Sind die Rohdaten kürzer - kein Problem. Sind sie länger, soll's einen Scrollbar geben. Die Höhe kann stark variieren, manche Sections werden nur 2-3 Zeilen haben, andere 30 oder 50. Ich kann also keine Normhöhe für alle vorgeben.

Geht das per CSS? Besonders gefallen würde mir eine Lösung, die im IE11 funktioniert, das ist aber nicht zwingend.

Ich habe zur Zeit eine Behelfslösung, die ich gern auf Flexbox umstellen würde. Hat jemand eine Idee?

section {
  position: relative;
}
article {
  white-space: pre;
}
article.formatiert {
  width: 50%;
}
article.raw {
   position: absolute;
   top: 0; left: 50%; width: 50%; height: 100%;
   overflow-y: scroll;
}

Natürlich bekommt die fertige Lösung noch ein paar Borders etc. dazu, damit habe ich keine Probleme. Es geht mir hier nur um den gewünschten Höhen-Effekt.

Rolf

[Matthias Apsel]

Hallo Rolf b,

<section>
<article class="formatiert">
</article>
<article class="raw">
</article>
</section>

Man kann sich ja auf diesen Standpunkt stellen:

<section>
  <article class="formatiert">
    <div class="raw">
    </div>
    <!-- hier der formatierte Artikel --> 
  </article>
</section>

Bis demnächst
Matthias

[MrMurphy1]

Hallo

Geht das per CSS?

So wie du dir das vorstellst wohl eher nicht. Wobei deine Wünsche nicht ganz nachvollziehbar sind.

Am nächsten wird deinen Vorstellungen wohl kommen, wenn du dem section-Element eine maximale Höhe (max-height) mit auf den Weg gibst.

Gruss

MrMurphy

[Gunnar Bittersmann]

@@Rolf b

Von diesen Sections will ich eine ganze Menge erzeugen, der linke article enthält eine formatierte Darstellung

Bin mir nicht sicher, ob section und article hier wirklich passen. Machmal ist ein div auch einfach nur ein div.

der rechte article die Rohdaten

Aber das wäre dann wohl ein code-Element.

Geht das per CSS?

Ist mir noch nicht eingefallen. Geht aber mit JavaScript

Besonders gefallen würde mir eine Lösung, die im IE11 funktioniert

Da wäre die Collection in ein Array umzuwandeln und forEach() darauf anzuwenden.

LLAP 🖖

[TS]

Hello,

Bin mir nicht sicher, ob section und article hier wirklich passen. Machmal ist ein div auch einfach nur ein div.

Kommt wohl auch darauf an, ob der "Abschnitt" (Section) eine eigene Überschrift bekommen soll...
Ein div benötigt wohl keine, oder?
Wie ist das mit article?

Liebe Grüße
Tom S.

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Geht das per CSS?

Ist mir noch nicht eingefallen. Geht aber mit JavaScript

Ich hab da mal noch Schatten eingebaut um anzuzeigen, wo es was zu scrollen gibt. (Es zeigen ja nicht alle Systeme immer Scrollbalken an.) Gefunden bei Lea Verou: Pure CSS scrolling shadows with background-attachment: local

LLAP 🖖

[Rolf b]

Ok, JavaScript wollte ich dafür vermeiden, der IE vertraut dem lokalen Filesystem nicht und bringt per Default Sicherheitswarnungen, wenn man in der Zone "Eigener Computer" eine Seite mit JS drin öffnet. Öffnen aus dem Filesystem wird aber der Kontext der Seite sein. Hätte ich sagen sollen, sorry.

Ich bleibe dann lieber bei meiner Behelfslösung mit position:absolute, das scheint am unproblematischsten.

Danke für eure Hinweise.

Rolf