Display flex et height 100% avec Safari

Version imprimable

26/04/2020, 16h04
lokomass

2 pièce(s) jointe(s)

Display flex et height 100% avec Safari

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) :

Pièce jointe 560396

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

Pièce jointe 560400

Merci d'avance pour votre aide,

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

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:

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

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

et qui impose cette contrainte, entre autres ... :koi: