Probleme de hauteur div conteneur avec float

Bonjour,

J'ai la structure de code suivant :

<div class="gd-conteneur">
<div class="child">contenu de child A</div>
<div class="child">contenu de child B</div>
<div class="child">contenu de child C</div>
</div>

avec comme mise en forme :

.gd-conteneur{
    border: 1px solid black;
    height: 200px;
}

.child{
    float: left;
    width: 300px;
    
}

Ceci afin de generer un tableau listant un type de produit de A à Z. Je souhaite que chaque div de classe child se mettent cote à cote puis descend selon la largeur de l'ecran.

Le probleme c'est qu'avec le float : left des div child, le div conteneur n'a plus considerer la hauteur des div child qu'il contient. Donc pour le bordure de 1px que j'ai defini dans le div conteneur, il faut également definir la hauteur. Ce qui veut dire qu'à chaque modification (ajout ou suppression) d'un div child, il faut redefinir la hauteur du conteneur.

Y-a-t-il un moyen de faire que le div conteneur considère le contenu des div child ?