CODEWITHSUNDEEP
htmlcss
Barry Fruitman
Barry Fruitman

Reputation: 12656

How do I constrain a <select> to its parent div's width?

My webpage has a <select> menu within a <div> parent. If the menu contains a very wide item, it overflows its parent's width (when closed). How do I truncate it instead?

I tried flex-shrink: 1 but nothing happened. Am I using it correctly? Do I apply it to the <select> or the wide <option>? Or something else?

Upvotes: 3

Views: 4985

Answers (2)

Barry Fruitman
Barry Fruitman

Reputation: 12656

I'm using flex display but flex-shrink: 1 by itself didn't work, but it worked when I added width: 100%. Not sure why that made a difference but it did.

Upvotes: 3

user2493235
user2493235

Reputation:

Have you tried applying a max-width to the select? Perhaps 100%? Here's a pen demonstrating it.

And another example of it provided by John Weisz:

div {
    width: 300px;
}

select {
    max-width: 100%;
}
<div>
    <select>
        <option>My webpage has a select menu within a div parent. If the menu contains a very wide item, it overflows its parent's width (when closed). How do I truncate it instead?</option>
        <option>Option 2</option>
        <option>Option 3</option>
    </select>
<div>

Upvotes: 6

Related Questions