Discussion :

[lokomass]

Bonjour à tous,
Je travaille actuellement avec des div, j'utilise display flex.
Ces div contiennent une autre qui elle contient du texte.
Je souhaite que le texte affiché soit centré verticalement, mais si la hauteur du texte dépasse la hauteur du conteneur, je veux pouvoir scoller verticalement.
La seule contrainte, c'est que les conteneurs sont en position absolute.
Mon code fonctionne bien sous IE, FF et Chrome mais comme toujours, sur mon iPhone, le rendu est différent.

Voici mon codepen : https://codepen.io/lokomass/pen/gOaWRwm

Ce que je souhaite (exemple sous FF, je peux scroller jusqu'au début du texte) :



Ce que j'ai sur mon iPhone (impossible d'afficher le début du texte)



Merci d'avance pour votre aide,

[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
26
.container {
  display: flex;
  align-items: center;
 
  width: 300px;
  height: 500px;
  overflow-y: auto;
 
  color: #000;
  font-size: 20px;
  background: #aaa;
}
.container > div {
  word-wrap: break-word;
  padding: 8px;
}
/* Positionnement absolu des "container" */
.container {
  position:absolute;
}
.c1 {
  left: 0;
}
.c2 {
  left: 320px;
}

[NoSmoking]

Bonjour,
le align-items: center dans la classe container engendra des soucis, il est préférable de le remplacer par un margin:auto sur les éléments .container > div.

Au final, d'après le code de jreaux62 :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.container {
  display: flex;
  width: 300px;
  height: 500px;
  overflow-y: auto;
  font-size: 20px;
  color: #000;
  background: #AAA;
}
.container > div {
  margin: auto;
  padding: 8px;
  word-wrap: break-word;
}

La seule contrainte, c'est que les conteneurs sont en position absolute.

et qui impose cette contrainte, entre autres ...