Skip to content

Implement flexbox in dropdowns

Description

With the recent implementation of a default max-height for dropdowns of 312px as per gitlab-design#71 (closed), we changed all dropdown heights without taking into account of header and footer controls, as well as previously set max-heights for the dropdown content container for specific dropdowns, causing double scrollbar issues.

As a short-term fix, we applied very specific max-height rules the dropdown content containers.

With the exception of IE11, all of our other supported browsers support flexbox. Unfortunately with IE11, there is a quirk with flexbox, which would require some JavaScript in order to make it function properly.

Proposal

  • Update dropdown CSS to use flexbox, with IE11-specific JavaScript to specify the height in order to get around the IE11 quirk.
  • Remove specific short-term fixes from !17665 (merged)

Links / references