Ich weiß nicht wirklich wie ich es beschreiben soll... Ich habe habe eine dynamische Anzahl Divs, die links floaten und horizontal gescrollt werden können. Die dargestellten Divs sollen dabei solange den verfügbaren Platz ausfüllen (also eine flexible Breite haben), bis ein weiteres Div von mindestens 190px Breite vollständig angezeigt werden kann.
Hmmm...
Ich habe hier mal einen "funktionierenden" Beispielcode beigefügt:
<html>
<head>
<style>
.outerContainer{
height:90px;
width: 100%;
background:#ff0000;
--childNodes:6;
--showNodes:1;
overflow-x:scroll;
overflow-y:hidden;
}
.outerContainer .scrollContainer {
width: calc(100% / var(--showNodes) * var(--childNodes));
background:#00ff00;
height:100%;
}
.outerContainer .scrollContainer .bt{
float:left;
background: #0000ff;
width: calc(100% / var(--childNodes));
box-sizing:border-box;
height:100%;
text-align:center;
border: 1px solid #000;
}
@media screen and (min-width: 180px) {
.outerContainer{
--showNodes:2;
}
}
@media screen and (min-width: 270px) {
.outerContainer{
--showNodes:3;
}
}
@media screen and (min-width: 360px) {
.outerContainer{
--showNodes:4;
}
}
@media screen and (min-width: 450px) {
.outerContainer{
--showNodes:5;
}
}
@media screen and (min-width: 540px) {
.outerContainer{
--showNodes:6;
}
}
@media screen and (min-width: 630px) {
.outerContainer{
--showNodes:7;
}
}
@media screen and (min-width: 720px) {
.outerContainer{
--showNodes:8;
}
}
</style>
<body>
<div class="outerContainer">
<div class="scrollContainer">
<div class="bt">BT1</div>
<div class="bt">BT2</div>
<div class="bt">BT3</div>
<div class="bt">BT4</div>
<div class="bt">BT5</div>
<div class="bt">BT6</div>
</div>
</div>
</body>
</html>
Alles anzeigen
Im Grunde funktioniert das Ganze so ja auch.
Über die CSS-Variablen --childNodes (Anzahl aller Divs im scrollContainer) und --showNodes (Anzahl der Divs, die bei einer bestimmten (Seiten-)Breite angezeigt werden), lässt sich das Verhalten steuern. Die Variable --childNodes wird dabei via PHP oder JS gefüllt während --showNodes durch unterschiedliche Media-Queries variiert.
Das funktioniert, so lange der scrollContainer maximal so breit ist, dass alle Divs angezeigt werden. Wird noch größer, skalierten die Divs nicht mehr, um den gesamten verfügbaren Platz auszufüllen.
Um das Problem zu lösen gibt es nun m.M. nach zwei Optionen:
1. "Überflüssige" Media-Queries entfernen
Natürlich würde es schon helfen, alles Media-Queries zu entfernen, die für --showNodes eine höhere Anzahl vorsehen, als tatsächlich vorhanden sind. Ich empfinde es allerdings als extrem unschönen Stil CSS dynamisch zu generieren und würde es gerne - soweit wie möglich - auf ein absolutes Minimum beschränken. Das dynamische setzen der --childNodes ist schon... Naja...
2. CSS-Funktion min()
Könnte ich im scrollContainer die Berechnung der Breite um die CSS-Funktion min() erweitern, wäre dies eigentlich mein favorisiertes Ziel! Voll dynamisch, 100% valide und ohne dynamische Generierung.
.outerContainer .scrollContainer {
width: calc(100% / min(var(--showNodes), var(--childNodes)) * var(--childNodes));
background:#00ff00;
height:100%;
}
Allerdings ist der Support von min() - gelinde gesagt - suboptimal...
Daher wollte ich einfach mal offen fragen, ob irgendjemand eine Idee hat, wie ich das Problem dennoch ohne Skripting lösen kann und/oder ob ich mit diesem Konstrukt schon völlig auf dem Holzweg bin und man dies ggf. besser/einfacher/konformer/etc. lösen könnte...
Für eventuelle Lösungs- oder Verbesserungsvorschläge wäre ich sehr dankbar!!!
LG
Q