Flexbox et overflow

Version imprimable

7 pièce(s) jointe(s)

Flexbox et overflow

Bonjour,

J'emploie depuis peu Flexbox et mon problème est peut-être très bête mais je bute dessus depuis hier sans avoir trouvé de solution sur le web.

J'ai recréé une version simplifiée de mon problème pour l'aborder ici :
- Un "container" autorisant le dépassement avec une barre pour scroller horizontalement
- Deux lignes "Flexbox" dans le container n'autorisant pas la mise à la ligne du contenu en fonction de la taille de l'écran
- Des blocs de largeur minimale et extensible dans chacune des lignes

En plein écran pas de problème. Mais quand on commence à redimensionner la fenêtre pour arriver en dessous de la taille minimale de l'ensemble des blocs, la barre pour scroller horizontalement apparait... en même temps que mon problème.
Comme vous pouvez le voir, lorsque l'on scroll horizontalement, ce qui me gène c'est que la couleur de fond de chaque ligne (bleu et orange) s'arrête au niveau de l'affichage de l'écran alors que j'aimerais que la couleur de fond soit appliquée à l'ensemble de la ligne.

Plein écran : Normal
Pièce jointe 217074

Scroll - Partie gauche : Normal
Pièce jointe 217072

Scroll - Partie droite : Pas ce que je veux
Pièce jointe 217073

Si je rajoute une largeur fixe (width: ...px) sur chacune des lignes alors la couleur de fond prend bien toute la ligne... Mais ce n'est évidemment pas la bonne solution étant donné que je ne peux pas prévoir la largeur de mes blocs en fonction de l'affichage de l'écran.

Merci d'avance à ceux qui pourraient me donner un coup de main. ;)

Voici la version simplifiée du code:
HTML
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 <div class="ensemble"> <div class='ligne1'>; <div class="block">11</div> <div class="block">99</div> <div class="block">99</div> <div class="block">99</div> <div class="block">99</div> <div class="block">99</div> <div class="block">99</div> <div class="block">22</div> </div> <div class='ligne2'>; <div class="block">AA</div> <div class="block">BB</div> <div class="block">BB</div> <div class="block">BB</div> <div class="block">BB</div> <div class="block">BB</div> <div class="block">BB</div> <div class="block">CC</div> </div> </div>
CSS
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 .ensemble { overflow-x:auto; background:green; border: 3px red dashed; } .ligne1 { display:flex; background:cyan; } .ligne2 { display:flex; background:orange; } .block { flex-grow:1; flex-shrink:0; width:100px; height:100px; border: 1px red dashed; }

03/08/2016, 10h00
Ecared
Pour régler le problème de ton exemple tu peux simplement faire:
Code:

1 2 3 .ligne1 .block{background:cyan;} .ligne2 .block{background:orange;}
Après suivant ton "vrai" code je ne sais pas si cela fonctionnera, si ce n'est pas le cas dis le moi :)

1 pièce(s) jointe(s)

Merci pour ta réponse. ;)
Effectivement, ça marche bien comme ça... mais en simplifiant le problème, je l'ai un peu trop simplifié. :oops:

Donc oui, appliquer la couleur aux blocs marche dans ce cas... mais j'essaye d'ajouter un degré de "difficulté" pour coller un peu plus à mon code final.
Voyons... Si j'ajoute par exemple une taille maximale pour l'extension des blocs, avec gestion des blocs en "justify-content: space-between;" sur la ligne, ça ne va plus..

Avec mon cas initial, j'ai toujours le même problème.
Avec ta solution, ça marche en "overflow"... mais en mode plein écran seuls les blocs sont colorés, et non la ligne.
Pièce jointe 217087

Le code CSS mis à jour :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 .ensemble { overflow-x:auto; background:green; border: 3px red dashed; } .ligne1 { display:flex; justify-content: space-between; background:cyan; } .ligne2 { display:flex; justify-content: space-between; background:orange; } .block { flex-grow:1; flex-shrink:0; flex-basis:100px; max-width:150px; height:100px; border: 1px red dashed; }

Bonjour,

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
.ensemble {
  overflow-x:auto;
  background:green;
  border: 3px red dashed;
}
 
.ligne1 {
  display:table;
  background:cyan;
  width:100%;
}
 
.ligne2 {
  display:table;
  background:orange;
  width:100%;
}
 
.block {
  display:table-cell;
 
  min-width:100px;
  height:100px;
  border: 1px red dashed;
}

03/08/2016, 19h58
memento80

Plus de Flexbox si je comprends bien ? :?
Ce qui sous entendrait que FlexBox n'est pas compatible avec mon cas de figure ? :question:

J'avais pensé à m'en passer si je n'arrivais pas à solutionner le problème mais je trouvais ça un peu dommage.
Merci de la réponse quand même... ;)
... mais n'y a-t-il pas un moyen en conservant flexbox malgré tout ?

Bonjour,
passe en inline-flex associé à un min-width :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
.ligne1 {
/*  display:flex;  /* exit */
  display: inline-flex;
  min-width: 100%;
  background:cyan;
}
 
.ligne2 {
/*  display:flex;  /* exit */
  display: inline-flex;
  min-width: 100%;
  background:orange;
}

Mmm.. Je ne l'ai jamais employé dans ma courte expérience (merci du tuyau). Je découvre..
Par contre, il ne semblerait pas que ça change quoique ce soit. J'ai toujours le même problème que précédemment. :?

Code CSS mis à jour avec la dernière solution :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 .ensemble { overflow-x:auto; background:green; border: 3px red dashed; } .ligne1 { display: inline-flex; min-width: 100%; justify-content: space-between; background:cyan; } .ligne2 { display: inline-flex; min-width: 100%; justify-content: space-between; background:orange; } .block { flex-grow:1; flex-shrink:0; flex-basis:100px; max-width:150px; height:100px; border: 1px red dashed; }

avec le html suivant, sans le ; parasite

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div class="ensemble">
  <div class='ligne1'>
    <div class="block">11</div>
    <div class="block">99</div>
    <div class="block">99</div>
    <div class="block">99</div>
    <div class="block">99</div>
    <div class="block">99</div>
    <div class="block">99</div>
    <div class="block">22</div>
  </div>
 
  <div class='ligne2'>
    <div class="block">AA</div>
    <div class="block">BB</div>
    <div class="block">BB</div>
    <div class="block">BB</div>
    <div class="block">BB</div>
    <div class="block">BB</div>
    <div class="block">BB</div>
    <div class="block">CC</div>
  </div>
</div>

essaies le CSS suivant

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
.ensemble {
  border: 3px red dashed;
  overflow-x: auto;
  background: green;
}
 
[class^=ligne] {
  display: inline-flex;
  justify-content: space-between;
  min-width: 100%;
}
.ligne1 {
  background: cyan;
}
.ligne2 {
  background: orange;
}
.block {
  flex-basis: 100px;
  flex-grow: 1;
  flex-shrink: 0;
  width: 100px;
  height: 100px;
  max-width: 100px;
  border: 1px red dashed;
}

04/08/2016, 09h02
memento80

Oui, ça a l'air de marcher nickel ! Merci beaucoup. :ccool:
Je continue les tests sur mes pages plus complexes.

Par contre, je me suis auto-formé sur le flexbox et je n'ai pas vu ce genre de cas de figure nulle part : inline-flex + min-width 100% sur ligne + rajouter width: ..px sur les blocs (en plus du flex-basis, sinon ça marche pas).
Quand j'ai lu les différents tutoriels sur le net, alors soit j'ai survolé ce genre d'astuce à ce moment (n'étant pas concerné), soit je n'ai pas lu de tutoriels exhaustifs. :oops:
Aurais-tu stp une référence en ligne avec ce genre d'astuces ?
04/08/2016, 12h17
NoSmoking
Les références sont innombrables si l'on lance une recherche, après il faut sélectionner celle qui nous semble être la plus simple/compréhensible.

commençons par, charité bien ordonnée commence...etc..
- Redécouvrez la mise en page avec Flexbox simple d’abord.
pour poursuivre, je ne citerai que
- A Visual Guide to CSS3 Flexbox Properties celle là je l'ai trouvé claire
- A Complete Guide to Flexbox incontournable sur CSS-Tricks
pour connaitre les surprises il existe sur GitHub
- philipwalton/flexbugs
et la meilleure pour la fin
- CSS Flexible Box Layout Module Level 1, de loin la plus complète, normal c'est la recommandation :lol:
Un source non négligeable de connaissance est également des tests et encore des tests ;)

Rien d'exhaustif bien sûr !
04/08/2016, 12h52
memento80

Certains liens ne me sont effectivement pas inconnus... mais c'est peut-être le dernier que j'ai du négligemment "survoler" le plus. :roll:
Merci encore.