[Résolu] Texte qui agrandit un div…

Bonjour,

j'ai un souci qui a l'air tout bête, mais je ne trouve pas de solution !
J'ai un DIV de classe D1 dans lequel je place un DIV de classe D2.
Dans ce second DIV, j'affiche un texte qui va être centré verticalement sur une hauteur de 40 pixels. Si le texte fait une ou deux lignes, tout va bien, mais dès qu'il en fait 3 (ou plus), le texte m'agrandit mon DIV en hauteur, malgré le fait que j'ai préalablement fixé cette hauteur !

.d1{
	position: absolute;
	top:150px;
	text-align:center;
	width:100%;
	color:#000044;
	display: flex;
	height: 40px;
	border:solid;
}
.d2{
	margin: auto;
	display: table;
}

<div class="d1">
	<div class="d2">
		Ligne 1<br/>
		Ligne 2<br/>
		Ligne 3<br/>
	</div>
</div>

J'ai essayé de mettre des max-height à 40px dans l'une ou l'autre des classes, mais rien à faire !

Si quelqu'un avait une idée, ce serait génial !
Merci d'avance.
Modifié par Le_pelican (02 Oct 2018 - 09:58)

Personnellement, quand je copie ton code .. je n'ai pas la Div qui s'agrandit mais le texte qui sort de la div1.

Enfaîte, je ne comprends pas réellement ce que tu veux faire .

Si tu veux que ta div parent s'agrandisse par rapport au contenu de ta div enfant

Remplace 40px par auto pour la hauteur ( "height") de ta div parent : D1
Modifié par pacsys (02 Oct 2018 - 10:44)

Oui, le texte sort bien de la DIV D1, car la DIV D2 s'agrandit (et dépasse de la DIV D1).
Ce que je veux, c'est tout simplement que la DIV D2 ne dépasse pas les 40 pixels de haut, comme je le lui ai (gentiment) demandé.

En même temps, si le contenu est supérieur à la capacité du contenant il est bien normal que le contenant s'adapte (comportement par défaut) ou qu'il dépasse (dans le deuxième cas pour lequel vous avez mis une hauteur max). Rien d'anormal à cela.

Maintenant, pour obtenir autre chose, soit il vous faut réduire la taille du texte, soit tronquer ce dernier, soit éviter qu'il dépasse avec un overflow:hidden sur le conteneur ('div.d1')...
Modifié par Olivier C (02 Oct 2018 - 10:48)

Je suppose que le surplus de texte doit être accessible ?
Tu peux tenter un overflow:auto ou hidden sur la div parent même si je ne suis pas trop fan pour ton cas .
Modifié par pacsys (02 Oct 2018 - 10:48)

Ah bah oui, ça marche… tout simplement !
Merci beaucoup ! C'est bien ce qu'il me fallait.
Modifié par Le_pelican (02 Oct 2018 - 10:51)

Ha . Bonne journée

ma réponse est arrivé quand tu as résolu. du coup j'édit ....
Modifié par JENCAL (02 Oct 2018 - 10:53)

Oui, oui, merci.
Je veux que le texte soit caché, ça me va bien.
Tant pis pour lui si il dépasse. Ça lui apprendra !