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