Quiero crear una ventana de tamaño fijo, por lo que si el texto del componente <Message/> es más largo (como en la imagen adjunta), quiero que se desplace, en un tamaño de ventana fijo.

Captura

enter image description here

export default function AllMessages(){
  ...
    return(
        <div className="message-style">
           ...  
            <div className="message-item">
                {messagesState.map(message => (
                    <ul class="list-group">
                        <Message from = {message.sender} to = {message.receiver} subject = {message.subject} content = {message.message} date = {message.creationDate}/>
                    </ul>
                ))}
            ...
}

export default function Message(props){
    return(
             <li class="list-group-item">
                <div className="container-msg">
                    <div>
                        <h5>{props.from}</h5>
                        <h5>{props.to}</h5>
                        <p>{props.subject}</p>
                        <p>{props.content}</p>
                        <p>{props.date}</p>
                    </div>
                    <div>
                        <span className="mx-2 text-danger" /*onClick={handleDelete}*/>
                            <i className="fas fa-trash" />
                        </span>
                    </div>
             </div>
        </li>

    )
}
1
botit 27 oct. 2020 a las 00:13

1 respuesta

La mejor respuesta

Debe establecer una altura y una altura máxima para el div contenedor de todos los mensajes y luego establecer overflow-y auto, por ejemplo

.all-messages{
    height:500px;
    max-height:500px;
    overflow-y:auto;
}
0
abolfazl shamsollahi 27 oct. 2020 a las 00:07