`flex-direction: row-reverse;` et scroll bar

Bonjour,

Je souhaite inverser l’ordre des colonnes (que les premières se retrouvent dernières et les dernières se retrouvent premières).

J’utilise donc flex-direction: row-reverse; mais je perd la scroll bar. Comment dois-je m’y prendre ? Ai-je oublier de définir une propriété flex à ma règle CSS?

Bon vol,

A.

Situation de départ :

J’ai cette situation de départ : https://jsfiddle.net/bjf61L2o/

<div class="box">
  <div class="flex-content">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

.flex-content > div {
  background: red;
  width:25px;
  min-width:25px;
  height:100px;
  margin:5px;
}

.flex-content {
  display: flex;
  height: 100%;
}

.box {
  padding:5px;
  border:3px solid black;
  width: 75px;
  height:125px;
  overflow-x: scroll;
}

Inversion des X :

.flex-content {
  flex-direction: row-reverse;
}

Hello,

Si je comprends bien le principe du flexbox layout, je pense que ce n’est pas possible d’avoir une scrollbar dans ce cas.

Si on numérote des div dans l’ordre du code et si je comprends bien, tu veux afficher:
10 9 8 7 6 5 4 3 2 1
à la place de:
1 2 3 4 5 6 7 8 9 10

sur plusieurs colonnes ou lignes ou pas, on s’en fout ici. Ce qui importe est que tu veux les avoir dans l’ordre inverse.

Maintenant supposons que sur ces 10 il n’y a la place que pour 5. Qu’est-ce que je dois afficher ?

   5 4 3 2 1  
<|-----------#|>

Ou bien:

   10 9 8 7 6
<|#-------------|>

Commencer avec une scrollbar à droite, c’est bizarre. Commencer avec les 5 derniers, c’est tout aussi bizarre. Si ça se trouve, ce petit dilemme n’est pas abordé dans la spécification….

Voilà, c’était mes 2$. Mais si ça se trouve je me trompe complètement.

Je voulais dire que la scrollbar sur mon deuxième rendu/résultat ne s’affiche plus.