Question 351720 in Html Question posted in
Some basic documentation can be found here.

Html – CSS – Setting fixed pixel width alongside max-width property

I have a div which contains a <p/> tag. The div is a container for a message text. The div should have a width of 200px, and also a max-width of 600px so that if the message is longer, the div can grow up to 600px. When implementing this, the width stays at 200px and the text overflows the div instead of the div growing in size (up to 600px)

Here is the code:

<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",
  },
}

I have also changed the width property of the messageBubbleWrapper to 30% (30% of the parent div which is set to 100% width) after researching solutions, however this just sets the width to 30% even if the text is large and overflows the div. Any solutions? Thanks.

Tags:

2

Answers


  1. 0

    You directly set the width on the dov to 200. You need to set the min-width property and get rid of the width property.

    Login or Signup to reply.
  2. 0

    You have width: 200px and max-width: 600px, the max width never kicks in, as the element is set to the width value that is smaller than the max width.

    Usually, we use those two properties like this: one value fixed and the other value percentage, i.e width: 600px and max-width: 100%, it means the element can never go wider than 600px while shrinks as needed such as on a mobile screen.

    To fix the layout you asked, you could do:

    width: fit-content; /* or max-content, or don't set width if not needed */
max-width: 600px;
min-width: 200px;

    And remember, min-width has higher priority than max-width has higher priority than width.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search