Scrollable property with div positioned at bottom-CodePudding

I have an array with texts, which should be displayed in a div. The div has the scrollable property. What I am looking for is that the div shows the bottom and that it can be scrolled up (it must look like a chat). what I am getting is the opposite. The top part appears in the container and I can scroll down.

<div id="ionCardMensaje">
 <ElementosMensaje mensajes={msg}></ElementosMensaje>
</div>

In the code above, the container should be positioned at the bottom so that it can scroll up. const ElementosMensaje = (props:{mensajes: Array }) => { var i=0 return ( {props.mensajes.map((a) => { i=i 1 return ( ) }) } ) }

const Card = (props:{ usuario:string, mensaje:string, dia:string, hora:string  }) => {
 return(
     <div id="contenedorMensajesChat">
    <IonCard id="cardMensajeChat">
        <p id="p-textoMensaje"> {props.mensaje} </p>
    </IonCard>
    <p id="p-textoMensaje"> {props.dia} " " {props.hora} </p>
    </div>
 )
}

This is the css

#ionCardMensaje{
    overflow: auto;
    height:400px;
}

CodePudding user response：

Please try this.

#ionCardMensaje{
    overflow: auto;
    height:400px;
    display:flex;
    flex-direction:column-reverse;
}