Force flex element not to grow in cross-axis direction

Question

I\'m making a page with a vertical menu using display: flex;. I want the menu\'s width to fit snuggly around a few buttons, without having to use a fixed width.

Answer 1

You were almost there with width. What you need to do is set width and min-width (demo):

.statusmessage {
 width:0; /* Collapses .statusmessage so it doesn't affect column width */
 min-width:100%; /* Expands .statusmessage to width of column */
}

The width can be (and probably should be) set to a value other than 0. It should just be the minimum width of the column or smaller. So use a value that works for you.

I've tested this on Chrome and Firefox and seems to work in both. Now, is it supposed to work? I'm not sure, I haven't read into the spec that much (it could be undefined). Make sure to test in all browsers you need it to work in. (And check the spec to see if this behavior is undefined/incorrect.)