Moved from summary of PR #2125 for history

I noticed that the example in our docs was wrong.

What was happening

We have nicely calculated minWidth, width, and maxWidth defaults for each flyout size. The width is a percentage of the window width while minWidth ensures it is at least a certain pixel width to start. The maxWidth is only applied if you add the prop as true but this is also a certain pixel size.

If you pass a custom pixel value as the maxWidth, it gets added as an inline style. However, if that number is smaller than the minWidth, the minWidth wins out. (That's just how the CSS works). Hence the screenshot above. 536.6px (we should probably round this) is the minWidth.

We can't actually remove the minWidth when someone passes a pixel value because then there's not good starting width. Because while it would work for numbers smaller than the minWidth it doesn't work if the number is larger:

So really the only custom maxWidths that work are on the medium and large size flyouts and the number has to be larger than the minWidth.