J'ai une disposition à trois colonnes où la colonne du milieu présente des problèmes de hauteur. De manière générale, il s'agit d'une application de chat. Le nom de la classe est : Pour un conteneur contenant ces trois colonnes (j'ai décidé d'utiliser une grille comme celle-ci pour que les colonnes soient de même hauteur) :

display: grid;
    grid-template-columns: 360px auto 300px;
    grid-auto-rows: 1fr;

Les colonnes de gauche et de droite sont moins importantes, mais il faut noter que la colonne de gauche affiche la liste des utilisateurs ; la longueur de la liste peut varier (les utilisateurs peuvent être filtrés). La colonne de droite a un contenu statique (au sens de taille) ;

Colonne du milieu :

position: relative;

Dans cette colonne du milieu, j'ai 3 divs dont le deuxième est un casse-tête

Top div (la hauteur est fixe);

height: calc(
            var(--users-search-height) + (var(--users-search-wrapper-height) - var(--users-search-height)) / 2
        );

Bottom Div (la hauteur est également fixe)

height: var(--users-search-wrapper-height);
       
        bottom: 0;

Lors du rendu initial, le contenu de la colonne de gauche est généralement le plus élevé et le div inférieur est visuellement aligné avec son contenu. Lors du filtrage des utilisateurs, la division inférieure de la colonne du milieu est visuellement alignée avec la section inférieure de la colonne de droite. C'est tout à fait normal. Le problème se produit lorsque le message de discussion apparaît dans le div du milieu dans la colonne du milieu. Tant que ces messages sont peu nombreux, ce n'est pas un problème, mais bientôt la division du milieu devient très grande et dépasse. Ainsi, la colonne du milieu devient plus haute et la division inférieure devient plus basse, ce qui brise la mise en page. J'aimerais que le div central de la colonne du milieu ait sa propre barre de défilement lorsqu'il atteint une hauteur spécifique, et ne dépasse pas cette hauteur, mais cela semble très compliqué.

Maintenant, la division du milieu est stylisée comme suit :

max-height: calc(
            100% - var(--users-search-wrapper-height) -
                (var(--users-search-height) + (var(--users-search-wrapper-height) - var(--users-search-height)) / 2)
        );

        height: as above;

        overflow-y: scroll;

Mais ça ne marche pas, la hauteur du contenu augmente avec les nouveaux messages (même si la barre de défilement est active et que certains contenus se trouvent "derrière" la barre de défilement). Je soupçonne que cela a quelque chose à voir avec le fait que le conteneur de la colonne n'a pas de hauteur de pixel fixe. Mais ce n’est pas possible. J'ai également essayé de définir le style de la colonne du milieu sur flex ou grille, mais tout fonctionne de la même manière. Peut-être que cela peut être résolu avec JS, mais je préférerais une solution CSS stricte. As tu des idées?

.wrap {
 height: calc(100vh - var(--top-div-height) - var(--bottom-div-height));
 overflow-y: scroll;
}