Fix horizontal overflow for selects with long names in sidebar

[laras126]

Description

Fix for #3518.
The select element was not responding to Flexbox appropriately in Webkit browsers.

How Has This Been Tested?

Device: MacBook Pro 2015
Browsers: Chrome 62.0.3202.94, Safari 11.0.1, FireFox 57.0.1

Screenshots (jpeg or gifs if applicable):

Types of changes

Adding a min-width: 0; to select elements solves this issue.

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows has proper inline documentation.

[ellatrix]

Tested and looks great, especially after the last change that makes sure the label does not shrink at smaller widths.

[laras126]

To expand on the last commit for the label -

Note that the "After" screenshot above shows the label for "Stick to the front page" wrapping, but I modified the max-width in my last commit to be a bit larger so this does not happen.

[aduth]

Was this necessary?

[laras126]

Not necessary for the fix itself, but it balances out the label width to keep it from wrapping when the select is long and label short - see this comparison:

Note that the "After" screenshot above shows the label for "Stick to the front page" wrapping, but the max-width at 75% instead solves that.

[aduth]

Would this have been possible to achieve with white-space: nowrap?

https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

[laras126]

For short label like this one, yes, but we wouldn't want to prevent wrapping for very long labels – with this solution, the label will wrap only when it starts to fill more than the max-width of 75%.

[afercia]

Noting that the max-width: 75%; may not work well with longer strings for checkboxes and radio buttons. See for example the screenshot below from the entities saved panel:

At the very leaat checkboxes and radio buttons should be excluded, however 75% seems more a magic nujber to me and ideally a more solid solution should be explored. Discovered on #67792 (comment)