My container has a nested <p/> tag serving as the message text. The container is set to have a width of 200px, with a max-width of 600px to allow for expansion if the message length exceeds the initial 200px. However, despite these settings, the div remains fixed at 200px and the text spills over instead of resizing the div up to 600px when necessary.
Below is the code snippet:
<div style={{styles.messageBubbleWrapper}}>
<p>{message.messageText}</p>
</div>
const styles = {
// styles for the div
messageBubbleWrapper: {
width: 200,
maxWidth: 500,
padding: 10,
borderRadius: 10,
height: "auto",
maxHeight: 300,
margin: "35px 0 20px 0",
},
}
In my attempt to find a solution, I even modified the width property of the messageBubbleWrapper to be 30% (of its parent div's 100% width), but this resulted in a static 30% width regardless of content overflow. Any suggestions or alternative solutions are greatly appreciated!