CSS Flexbox (Header & Content[overflow: scroll]) with unknown header height -


struggling figure out how can have flexbox header (unknown height) , content (which scrollable) should take rest of space header not using.

if set header height have no issues, because header can have more or less content (or screen sizes causing content wrap), can't set fixed height.

example image http://i.imgur.com/rygpp4a.jpg

any ideas on how achieve above?

html,body{    height: 100%;    margin: 0;  }    main{    display: flex;    flex-direction: column;    height: 100%;    width: 50%;    margin: auto;  }    header{    background-color: #333;    color: #eee;  }    article{      background-color: #eee;    overflow-y: scroll;    flex: 1;  }
<main>    <header>some text</header>    <article>lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. @ vero eos et accusam et justo duo dolores et ea rebum. stet clita kasd gubergren, no sea takimata sanctus est lorem ipsum dolor sit amet. lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. @ vero eos et accusam et justo duo dolores et ea rebum. stet clita kasd gubergren, no sea takimata sanctus est lorem ipsum dolor sit amet.</article>  </main>

this should work, if not want please tell me in comments


Comments

Popular posts from this blog

swift - Button on Table View Cell connected to local function -

dns - Dokku server hosts two sites with TLD's, both domains are landing on only one app -

c# - ajax - How to receive data both html and json from server? -