The flexible force element must not grow in the transverse direction

Question

I am making a vertical menu page using display: flex; . I want the width of the menu to be around several buttons, without having to use a fixed width.

However, I also want a status message to appear in the menu window, which may have a rather long text. I would like this status div to have the width of the menu, without forcing the menu container to increase its width. Instead, the status-div should increase its height and wrap the text.

Explaining this with words is quite complicated, so I suggest you check out this script: http://jsfiddle.net/bXL3q/

Note the difference when setting .statusmessage to display: none; .

Any ideas, or is this what I'm trying to make impossible? Could it be?

---

What I tried:

• width: 100% fails, obviously it just assumes the width of the parent element
• width: -webkit-min-content kind of works, but this makes the element too narrow.
• flex-basis and flex-grow affect the height of the element and do not affect the width
• position: absolute will solve the problems with width, but now I have no way to determine the height of the status-div .. (in order to force the scroll bar in windows with small height - instead, it will simply flow over the button elements)

---

 body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; display: flex; flex-flow: row nowrap; align-items: stretch; } .page { flex-grow: 1; background-color: yellow; } .menu { background-color: red; height: 100%; display: flex; flex-flow: column nowrap; } .somechildren { white-space: nowrap; background-color: green; border: 1px solid black; } .menu>* { flex-shrink: 0; } .separate { flex-grow: 1; } .statusmessage { background-color: magenta; align-self: flex-end; /*display: none;*/ } 

 <div class=menu> <div class=somechildren>I'd like the menu's</div> <div class=somechildren>width to fit nicely</div> <div class=somechildren>around these children</div> <div class=separate></div> <div class=statusmessage> While forcing this status message to wrap and grow its height, without affecting the width of the container. </div> </div> <div class=page> The page </div> 

Answer 1

You were almost there with width . You need to 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 */ } 

width may (and probably should) be set to a value other than 0 . This should be a minimum column width or less. So use a value that works for you.

I tested this on Chrome and Firefox and it seems to work in both. Now, should this work? I'm not sure, I did not read into the specification , which is strong (it can be undefined). Make sure you check in all the browsers you need to make them work. (And check the spec to make sure this behavior is undefined / wrong.)

Answer 2

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

Instead, I install

 position: relative; 

on the flex child and wrapped its contents in the inner div using

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

This prevents the contents from contributing to the size of the flexible container while still maintaining the transverse axis size determined by the remaining children of the flexible disk.