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

width: 0; min-width: 100%; didn't work for me.

Instead, I set

position: relative;

on the flex child and wrapped its contents in an inner div with

position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;

This prevents the contents from contributing to the flex container size while still matching the cross-axis size determined by the rest of the flex children.

Answer 2

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.)