Responsive flex box design with sticky header

css, flexbox, sticky

Solution

It's a little hard to catch what are you trying to do, but I have modified the fiddle to this

http://jsfiddle.net/Xpvj4/

The idea is to have just two main flexed elements `header` and `.content` and put both `article` and `footer` into the `.content`.

html, body {
  margin:0;
  height:100%;
  min-height:100%;
}
body {
  margin:0;
  display: flex;
  flex-direction: column;
}
header {
  flex: 1 0 10%;
  background:red;
}
.content {
    flex: auto;
    overflow-y: auto;
}
article {
    background:green;
}
footer {
    height: 40px;
    background:blue;
}

Problem

I am having problems designing a sticky header for my responsive layout site which uses flex box. I found this fiddle which almost solves my problem, but not quite: http://jsfiddle.net/RnBhH/2/ How can I make the header element height fit the content in the header since the height is different depending on device viewport width? Provided #1 is solved, how can I make the article and the footer to be scrollable while the variable height header sticky to the top? ``` html, body { margin:0; height:100%; min-height:100%; } body { margin:0; display: flex; flex-direction: column; } header { flex: 1; background:red; } article { flex: 8; overflow-y: scroll; background:green; } footer { flex: 1; background:blue; } ```

Original source