I have an issue where the overflow of a scrollable list on a website is cutting off my dropdown menu. The scrollable list has a height constraint because it is in a modal which has a set height and width.

The dropdown has about 11 items so it is fairly big, so any alternatives would have to accommodate for those items.

I have attached an image to help further explain the issue.

Overflow dropdown issue

  • I don't quite catch your meaning. Did you mean that the first model consists of 11 items but because of the below list model it can now only show 4? And you want the first model not to be cut off? Nov 12, 2018 at 7:17
  • Yes thats what I mean
    – Darian
    Nov 12, 2018 at 9:37
  • Let us know what this UI screen is and what's in it. What are users supposed to be doing? What is in the scrollable list? What's in the other two sections?
    – moot
    Nov 12, 2018 at 13:07

1 Answer 1


The scrollable list needs to be above the layer of the modal, by that way it will expand above the modal containing it.

enter image description here

moreover it is not necessary that dropdown should expand below only, you can expand it from above also, as done in example

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