Hello,
J'ai déjà fais des recherches a ce sujet mais je n'ai rien trouvé.
Je fais un système de messagerie(pas en live, c'est un projet perso), donc j'ai des div qui sont les messages, en position relative:

Comme vous pouvez le voir, les messages prennent la max-width que je leur ai attribuée, le problème c'est que c'est très moche😂(surtout pour les petits messages comme les deux drn).
J'aimerais alors savoir comment faire pour que la taille ne soit pas la max-width

J'aimerais alors savoir comment faire pour que la taille ne soit pas la max-width

max-width c'est la taille maximale que ton élément peut faire. Essaie de mettre une width

Ca ne fonctionne pas, width prend le dessus sur la max-width, donc la max-width ne sert a rien

Peut-être mettre display: inline-block; ou max-width: fit-content; ?

Jpp mettre en inline-block vu que mes div doivent etre les unse en dessous des autres

T'as bien conscience que sans un exemple reproductible personne peut t'aider

Le 22 janvier 2022 à 22:48:57 :
T'as bien conscience que sans un exemple reproductible personne peut t'aider

.message{
    background-color: #595775;
    padding: 6px;
    border-radius: 10px;
    max-width: 60%;
    color: #F1E0D6;
    margin-bottom: 10px;
    position: relative;
}

Le 24 janvier 2022 à 21:22:14 :

Le 22 janvier 2022 à 22:48:57 :
T'as bien conscience que sans un exemple reproductible personne peut t'aider

.message{
    background-color: #595775;
    padding: 6px;
    border-radius: 10px;
    max-width: 60%;
    color: #F1E0D6;
    margin-bottom: 10px;
    position: relative;
}

Je crois que tu n’as pas compris, il te demande un projet minimaliste complet html/css/js pour pouvoir tester et ainsi t’expliquer ce qu’il ne va pas

Donne nous ton chat sur jsfiddle par exemple

Donne ton conteneur l'auteur ( le bloc qui contient tes différentes bulles de messages ) ça devrait le faire, c'est du CSS pas du JS.
Y a pas besoin d'un projet pour résoudre un truc qui parait assez trivial à vue de nez.

Le 24 janvier 2022 à 22:03:24 :
Donne ton conteneur l'auteur ( le bloc qui contient tes différentes bulles de messages ) ça devrait le faire, c'est du CSS pas du JS.
Y a pas besoin d'un projet pour résoudre un truc qui parait assez trivial à vue de nez.

Le 24 janvier 2022 à 22:03:24 :
Donne ton conteneur l'auteur ( le bloc qui contient tes différentes bulles de messages ) ça devrait le faire, c'est du CSS pas du JS.
Y a pas besoin d'un projet pour résoudre un truc qui parait assez trivial à vue de nez.

Tiens:
<div onClick={msgClickedHandler} className={author == name ? classes.messageAuthor : classes.message}> <p>{msg}</p> {displayed && <div className={classes.admin}> <svg onClick={deleteClickedHandler} xmlns="http://www.w3.org/2000/svg" width="16" fill="currentColor" viewBox="0 0 16 16"> <path d="M2.5 1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1H3v9a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V4h.5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H10a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1H2.5zm3 4a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5zM8 5a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7A.5.5 0 0 1 8 5zm3 .5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 1 0z" /> </svg> </div>} </div>

Dsl pour l'indentation