CSS Auto Width is not Working with Flexbox

Question

Greetings Overflowers, I have an HTML page as follows: 1. HTML, BODY, DIVs and SPANs are reset to have `0px border`, `padding`, `margin` and `outline` 2. HTML, BODY and DIV elements has `display: -webkit-flex` and `-webkit-flex: 0 0 auto` 3. HTML and BODY with `height: 100vh` and `width: 100vw` 4. Inside BODY, a DIV named `#slider` with `display: -webkit-flex` and -`webkit-flex: 0 0 auto` 5. Inside this `#slider`, two DIVs `#sidebar` and `#main` with `display: -webkit-flex` and `-webkit-flex: 0 0 auto` for both, `width: 10rem` for `#sidebar` and `width: 100vw` for `#main` Problem: I was expecting the width of `#slider` to be `10rem + 100vw`, but it is only `100vw` even if I change the width of `#main` to something smaller such as `50vw`! Am I missing anything in here? Kind regards ``` /* unicode-bidi: bidi-override; -webkit-user-modify: read-write-plaintext-only; -webkit-touch-callout: none; -webkit-text-size-adjust: none; -webkit-overflow-scrolling: touch; -webkit-transition: -webkit…

Accepted Answer

See http://codepen.io/anon/pen/fluKI which works as you would expect (Chrome 27)

As far as I can tell from your description, you need to set the width and height of your flex container (`#slider`). Using `flex: 0 0 auto;` on `#slider` won't do what you expect since it is a flex container and not a flex item itself (read: it is not in a flex container).

Also please note that `flex: 0 0 auto;` is the same as saying `flex: none;` which removes the item's flexibility.

CSS Auto Width is not Working with Flexbox

Solution

Problem