Discussion :

[memento80]

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


Scroll - Partie gauche : Normal


Scroll - Partie droite : Pas ce que je veux


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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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;
}

[Ecared]

Pour régler le problème de ton exemple tu peux simplement faire:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[memento80]

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

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.


Le code CSS mis à jour :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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;
}

[Invité]

Bonjour,

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

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;
}

[memento80]

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

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 ?

[NoSmoking]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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;
}