Hauteur du contenu enfant plus grand que son parent ?

**jeroman** · 23/10/2021, 19h23

Bonjour,

Je ne suis pas un pro en CSS et je viens vers vous pour tenter de résoudre un problème que j'ai.

En gros, j'ai apparemment un élément enfant qui est plus large en hauteur que son parent. Comment cela se fait-il ? Comment résoudre ça ?

Le souci, c'est que cela me provoque l'affichage de la scrollbar verticale sous Vivaldi (mais étrangement pas sous Firefox, bien que le contenu peut quand même défiler sous la souris).

J'ai réduit le code au strict minimum, qui reproduit le problème : https://jsfiddle.net/o1nxvabg/

Je le reposte ici, ça peut servir :

Code html :

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
<!DOCTYPE html>
<html lang="fr">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Titre</title>
    <link rel="stylesheet" href="style.css">
</head>
 
<body>
 
    <nav>
        <span class="nav_repertoire">Menu</span>
    </nav>
 
    <main>
    </main>
</body>
 
</html>

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
27
28
29
30
31
32
body {
  margin-top: 3em;
}
 
main {
  margin-top: 1em;
}
 
nav {
  position: fixed;
  top: 0px;
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 100%;
  overflow-wrap: normal;
  white-space: nowrap;
  scrollbar-width: thin;
  padding: 0;
  margin: 0;
}
 
nav span {
  padding: 0;
  margin: 0;
}
 
nav .nav_repertoire {
  border-width: 2px;
  border-style: solid;
  padding: 2px;
  border-radius: 5px;
}

Merci pour vos réponses.

**jeroman** · 23/10/2021, 21h19

Finalement, après avoir bidouillé mon code CSS, j'ai réussi à régler le problème.

**ProgElecT** · 24/10/2021, 09h44

Salut

C'est sympa d'avoir signalée que tu as résolut le problème, donner le code de la solution serait sûrement apprécié par la communauté..

**jeroman** · 24/10/2021, 13h55

Oui, en effet. Mille excuses.

J'ai ajouté un display: inline-block; dans le bloc nav span :

Code CSS :

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

1
2
3
4
5
nav span {
  padding: 0;
  margin: 0;
  display: inline-block;
}

Hauteur du contenu enfant plus grand que son parent ?

Dimensionnement en CSS

Discussions similaires

Partager

Partager