XUL: How to implement a multi-line flex-capable text-selectable element

The Issue

XUL description elements are not text-selectable and do not support the right-click edit menu.  However, they handle the flex attribute nicely by wrapping at the maximum width, and expanding the container box vertically.

For text selection, what you typically want to use is a textbox with class="plain", multiline="true", and readonly="true".  This emulates a description element fairly well. 

But the XUL textbox elements do not handle the flex attribute well.  If you don't set the element to mulitline, then it will stick to one line and will not wrap like the description element.

And if you set it to multiline, then you have to specify a width and height (or it uses a default), and if it goes beyond the height, then it will not grow the containing box vertically, it will instead add scrollbars.

The Workaround

The workaround is to use a deck that has both a textbox and a description element.  The description element uses the same text as the textbox to compute the wrapping, so it flexes to the correct width and height, making the textbox element behave the same way.

You just have to be sure to set the margins and padding the same on all elements and child elements.

One problem I ran into was that CSS would not allow me to turn off the overflow style on the child textarea (perhaps a problem related to multi-level hidden XBL children, I'm not sure).  I worked around that with JS by getting the anonymous element and explicitly setting the overflow style to hidden.