3

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?

1
  • 3
    can you post your code? Jun 28, 2017 at 18:38

2 Answers 2

6

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>

1
  • Yes I already tried that. It doesn't work on my page like it does on yours. :-/ Jul 21, 2017 at 21:58
3

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.