Bonjour, je rencontre un problème sur la réalisation d'un mini chat (du cours PHP), j'aimerais ajouter une barre de défilement verticale à la zone qui contient les messages du chat, cependant elle ne veut pas fonctionner je ne sais pas pourquoi. Je pense que c'est dût au contenue qui sort d'une base de donnée.

J'obtiens :

Il y a bien du contenue qu'on ne voit pas, et ma barre de défilement ne fonctionne pas, le code du contenue :

<div id="post_content">
            <?php 
                $infos_read = $bdd->query('SELECT author,message FROM chat_box_content');
                while($data = $infos_read->fetch()){
                  echo '<p class="author_pseudo">' . $data['author'] . '</p>';
                  echo '<p class="posted_message">' . $data['message'] . '</p>';
                }
            ?>
</div>

Le css :

#post_content{
  width: 100%;
  max-height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
  margin:0;
  overflow-y: scroll;
}

.author_pseudo{
  margin: 0;
  margin-right: 20px;
  min-width: 10%;
  padding: 2px 20px;
  text-align: center;
  border-radius: 20px 20px 0 0;
  background-color: #008909FF;
  font-family: 'Calibri', serif;
  font-size: 0.8em;
  color: #01FF00FF;
}

.posted_message{
  margin: 0;
  text-align: end;
  background-color: rgba(102, 204, 34,0.8);
  min-width: 40%;
  max-width: 70%;
  overflow-wrap: break-word;
  margin-right: 20px;
  border-radius: 20px 0 20px 20px;
  padding: 3px 20px;
  font-family: 'Calibri', serif;
  font-weight: bold;
  margin-bottom: 30px;
}

J'ai tout essayé, changer les hauteurs etc, passer l'overflow en auto etc.. Rien ne marche, pourtant si je laisse en visible j'obtiens :

Merci pour votre aide

-
Edité par AntoninJvlt 11 mars 2018 à 17:31:39

Bonsoir,

C'est ton justify-content: flex-end;

Enlève-le et tu retrouveras ta barre.