bonjour je possède 3 box principal dans mon code une box possède les deux autre qu'on appelle content a l'intérieur j'aimerais que l'une des box (side-content)soit statique et l'autre box(right-content)devra pouvoir dérouler sur tout son contenu.

body{
    display: flex;
    flex-direction: column;
    background: rgb(28, 28, 80);
    overflow: hidden;
}

 
.content{
    display: flex;
    background: transparent;
    width: 100%;
    height: auto;
}
.side-content{
    width: 340px;
    height: 300px;
    border-right: 2px solid rgb(25, 25, 61);
}
.right-content{
    overflow: auto;
    scrollbar-3dlight-color: darkcyan;
    width: 100%;
    height: 100%;
    color: white;
    font-family: Kode Mono;
}

Voila mon code svp pourriez vous me suggérer des solutions pour le moment l'interface s'arrête comme je le voulais mais right-content ne déroule pas

-
Edité par BeginMurky 25 avril 2024 à 22:37:00

Bonsoir,

Pour pouvoir dérouler correctement right-content, il faut définir une hauteur maximum et utiliser overflow-y si vous voulez que le déroulement soit vertical. Il n'y a pas besoin de mettre <> autour de br. J'ai aussi ajouter de la marge à gauche, vous pouvez l'enlever si c'est moche. Voici une proposition de code : 

body {
    display: flex;
    flex-direction: column;
    background: rgb(28, 28, 80);
    overflow: hidden;
}

br.content {
    display: flex;
    background: transparent;
    width: 100%;
    height: auto;
}

.side-content {
    width: 340px;
    height: 300px;
    border-right: 2px solid rgb(25, 25, 61);
}

.right-content {
    overflow-y: auto; /* Utilisez overflow-y pour activer le défilement vertical */
    scrollbar-3dlight-color: darkcyan;
    width: 100%;
    max-height: 300px; /* Hauteur maximale pour activer le défilement */
    color: white;
    font-family: Kode Mono;
    margin-left: 10px; /* Ajoutez une marge à gauche pour éviter que le contenu ne soit caché sous side-content */

-
Edité par TechlumièreQuasarquest 1 mai 2024 à 18:30:14