Flexbox height Constraint 100% of available space

I would like a flexbox container to occupy the available space beneath a header container with unknown height. Columns inside the container that exceed the available space should be scrollable. I demonstrated the desired outcome in a Fiddle.

The fiddle uses the following line to calculate the available space.

height: calc(100vh - 4em);

This is a problem because a) the header isn't always 4em, and b) vh doesn't take scroll bars into account.

* {

  box-sizing: border-box;

}



div {

  border: 1px solid #000;

}



.header {

  background: #ededed;

}



.flex-container {

  display: flex;

  background: #CCC;

  height: calc(100vh - 3em);

  /* remove line to see outcome w/o sketchy calculation */

}



.column {

  min-width: 9em;

  width: 9em;

  background: #fff;

  overflow-y: auto;

}

<div class="header">

  I'm a header

</div>

<div class="flex-container">

  <div class="column">

    Some content

  </div>

  <div class="column">

    more content

  </div>

  <div class="column">

    So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content

    it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable

    So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more

    content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's

    unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable

    So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more

    content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's

    unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable

  </div>

  <div class="column">



  </div>

  <div class="column">

    Some content

  </div>

</div>

edited Nov 14 '18 at 12:37

Michael_B

145k47232340

asked Nov 14 '18 at 12:19

Felix

65111

the header isn't always 4em - Calculate height of header with jquery and change height
– Znaneswar
Nov 14 '18 at 12:29

add a comment |

The fiddle uses the following line to calculate the available space.

height: calc(100vh - 4em);

This is a problem because a) the header isn't always 4em, and b) vh doesn't take scroll bars into account.

* {

  box-sizing: border-box;

}



div {

  border: 1px solid #000;

}



.header {

  background: #ededed;

}



.flex-container {

  display: flex;

  background: #CCC;

  height: calc(100vh - 3em);

  /* remove line to see outcome w/o sketchy calculation */

}



.column {

  min-width: 9em;

  width: 9em;

  background: #fff;

  overflow-y: auto;

}

<div class="header">

  I'm a header

</div>

<div class="flex-container">

  <div class="column">

    Some content

  </div>

  <div class="column">

    more content

  </div>

  <div class="column">

    So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content

    it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable

    So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more

    content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's

    unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable

    So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more

    content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's

    unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable

  </div>

  <div class="column">



  </div>

  <div class="column">

    Some content

  </div>

</div>

edited Nov 14 '18 at 12:37

Michael_B

145k47232340

asked Nov 14 '18 at 12:19

Felix

65111

the header isn't always 4em - Calculate height of header with jquery and change height
– Znaneswar
Nov 14 '18 at 12:29

add a comment |

The fiddle uses the following line to calculate the available space.

height: calc(100vh - 4em);

This is a problem because a) the header isn't always 4em, and b) vh doesn't take scroll bars into account.

* {

  box-sizing: border-box;

}



div {

  border: 1px solid #000;

}



.header {

  background: #ededed;

}



.flex-container {

  display: flex;

  background: #CCC;

  height: calc(100vh - 3em);

  /* remove line to see outcome w/o sketchy calculation */

}



.column {

  min-width: 9em;

  width: 9em;

  background: #fff;

  overflow-y: auto;

}

<div class="header">

  I'm a header

</div>

<div class="flex-container">

  <div class="column">

    Some content

  </div>

  <div class="column">

    more content

  </div>

  <div class="column">

    So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content

    it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable

    So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more

    content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's

    unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable

    So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more

    content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's

    unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable

  </div>

  <div class="column">



  </div>

  <div class="column">

    Some content

  </div>

</div>

edited Nov 14 '18 at 12:37

Michael_B

145k47232340

asked Nov 14 '18 at 12:19

Felix

65111

The fiddle uses the following line to calculate the available space.

height: calc(100vh - 4em);

This is a problem because a) the header isn't always 4em, and b) vh doesn't take scroll bars into account.

* {

  box-sizing: border-box;

}



div {

  border: 1px solid #000;

}



.header {

  background: #ededed;

}



.flex-container {

  display: flex;

  background: #CCC;

  height: calc(100vh - 3em);

  /* remove line to see outcome w/o sketchy calculation */

}



.column {

  min-width: 9em;

  width: 9em;

  background: #fff;

  overflow-y: auto;

}

<div class="header">

  I'm a header

</div>

<div class="flex-container">

  <div class="column">

    Some content

  </div>

  <div class="column">

    more content

  </div>

  <div class="column">

    So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content

    it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable

    So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more

    content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's

    unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable

    So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more

    content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's

    unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable

  </div>

  <div class="column">



  </div>

  <div class="column">

    Some content

  </div>

</div>

* {

  box-sizing: border-box;

}



div {

  border: 1px solid #000;

}



.header {

  background: #ededed;

}



.flex-container {

  display: flex;

  background: #CCC;

  height: calc(100vh - 3em);

  /* remove line to see outcome w/o sketchy calculation */

}



.column {

  min-width: 9em;

  width: 9em;

  background: #fff;

  overflow-y: auto;

}

<div class="header">

  I'm a header

</div>

<div class="flex-container">

  <div class="column">

    Some content

  </div>

  <div class="column">

    more content

  </div>

  <div class="column">

    So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content

    it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable

    So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more

    content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's

    unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable

    So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more

    content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's

    unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable

  </div>

  <div class="column">



  </div>

  <div class="column">

    Some content

  </div>

</div>

* {

  box-sizing: border-box;

}



div {

  border: 1px solid #000;

}



.header {

  background: #ededed;

}



.flex-container {

  display: flex;

  background: #CCC;

  height: calc(100vh - 3em);

  /* remove line to see outcome w/o sketchy calculation */

}



.column {

  min-width: 9em;

  width: 9em;

  background: #fff;

  overflow-y: auto;

}

<div class="header">

  I'm a header

</div>

<div class="flex-container">

  <div class="column">

    Some content

  </div>

  <div class="column">

    more content

  </div>

  <div class="column">

    So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content

    it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable

    So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more

    content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's

    unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable

    So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more

    content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's

    unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable

  </div>

  <div class="column">



  </div>

  <div class="column">

    Some content

  </div>

</div>

html css css3 flexbox

edited Nov 14 '18 at 12:37

Michael_B

145k47232340

asked Nov 14 '18 at 12:19

Felix

65111

edited Nov 14 '18 at 12:37

Michael_B

145k47232340

asked Nov 14 '18 at 12:19

Felix

65111

edited Nov 14 '18 at 12:37

Michael_B

145k47232340

edited Nov 14 '18 at 12:37

Michael_B

145k47232340

edited Nov 14 '18 at 12:37

Michael_B

145k47232340

asked Nov 14 '18 at 12:19

Felix

65111

asked Nov 14 '18 at 12:19

Felix

65111

asked Nov 14 '18 at 12:19

Felix

65111

the header isn't always 4em - Calculate height of header with jquery and change height
– Znaneswar
Nov 14 '18 at 12:29

add a comment |

the header isn't always 4em - Calculate height of header with jquery and change height
– Znaneswar
Nov 14 '18 at 12:29

the header isn't always 4em - Calculate height of header with jquery and change height
– Znaneswar
Nov 14 '18 at 12:29

add a comment |

3 Answers
3

active

oldest

votes

One of the reasons to use flex is to not specify fixed dimensions. flex: 1 (or flex-shrink, flex-grow, flex-basis) can be used to fill available width or height:

.container {

  display: flex;

  flex-direction: column;

  

  /* for demo purposes */

  height: 300px;

  border: 1px solid red;

}



header {

  padding: 20px;

}



.content {

  flex: 1;

  background-color: #f0f0f0;

}

<div class="container">

  <header>Header of any height</header>

  <div class="content">Content which fills remaining height</div>

</div>

So you should wrap your header and content in a flex container and set the content to flex: 1: https://jsfiddle.net/j4sLgh0o/

edited Nov 14 '18 at 12:34

answered Nov 14 '18 at 12:29

Dominic

26.5k106890

add a comment |

You don't need a fixed height or calc(). Flex properties are good enough (plus a minor hack for the scroll function to activate in Edge and Firefox).

body {

  display: flex;

  flex-direction: column;

  height: 100vh;

  margin: 0;

}



header {

  flex: 0 0 4em; /* flex-basis can be anything */

  background-color: lightgreen;

}



.flex-container {

  display: flex;

  background: #CCCCCC;



 /* for Edge and FF */

  height: 1px; /* these browsers won't trigger an overflow without a fixed height */

  flex-grow: 1;

}



.column {

  flex: 0 0 9em;

  background: #fff;

  overflow-y: auto;

}





div {

  border: 1px solid #000;

}

* {

  box-sizing: border-box;

}

<header></header>

<div class="flex-container">

  <div class="column">Some content</div>

  <div class="column">more content</div>

  <div class="column">

    So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content

    it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable

    So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more

    content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's

    unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable

    So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more

    content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's

    unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable

  </div>

  <div class="column"></div>

  <div class="column">Some content</div>

</div>

answered Nov 14 '18 at 12:32

Michael_B

145k47232340

add a comment |

you don't need to use calc function.
when you have a flex container if one of its children doesn't have flex property, it will only fill the area it needs then if next child has flex:1 it will fill the remaining area.

.container{

    display: flex;

    flex-direction: column;

    height: 100vh;

    background: green

}

.content{

    flex: 1;

    background: red

}

<div class="container">

    <div>Header here</div>

    <div class="content">Content here</div>

</div>

edited Nov 14 '18 at 12:45

answered Nov 14 '18 at 12:39

faraz foroughi

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53300109%2fflexbox-height-constraint-100-of-available-space%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

3 Answers
3

active

oldest

votes

3 Answers
3

active

oldest

votes

One of the reasons to use flex is to not specify fixed dimensions. flex: 1 (or flex-shrink, flex-grow, flex-basis) can be used to fill available width or height:

.container {

  display: flex;

  flex-direction: column;

  

  /* for demo purposes */

  height: 300px;

  border: 1px solid red;

}



header {

  padding: 20px;

}



.content {

  flex: 1;

  background-color: #f0f0f0;

}

<div class="container">

  <header>Header of any height</header>

  <div class="content">Content which fills remaining height</div>

</div>

So you should wrap your header and content in a flex container and set the content to flex: 1: https://jsfiddle.net/j4sLgh0o/

edited Nov 14 '18 at 12:34

answered Nov 14 '18 at 12:29

Dominic

26.5k106890

add a comment |

One of the reasons to use flex is to not specify fixed dimensions. flex: 1 (or flex-shrink, flex-grow, flex-basis) can be used to fill available width or height:

.container {

  display: flex;

  flex-direction: column;

  

  /* for demo purposes */

  height: 300px;

  border: 1px solid red;

}



header {

  padding: 20px;

}



.content {

  flex: 1;

  background-color: #f0f0f0;

}

<div class="container">

  <header>Header of any height</header>

  <div class="content">Content which fills remaining height</div>

</div>

So you should wrap your header and content in a flex container and set the content to flex: 1: https://jsfiddle.net/j4sLgh0o/

edited Nov 14 '18 at 12:34

answered Nov 14 '18 at 12:29

Dominic

26.5k106890

add a comment |

One of the reasons to use flex is to not specify fixed dimensions. flex: 1 (or flex-shrink, flex-grow, flex-basis) can be used to fill available width or height:

.container {

  display: flex;

  flex-direction: column;

  

  /* for demo purposes */

  height: 300px;

  border: 1px solid red;

}



header {

  padding: 20px;

}



.content {

  flex: 1;

  background-color: #f0f0f0;

}

<div class="container">

  <header>Header of any height</header>

  <div class="content">Content which fills remaining height</div>

</div>

So you should wrap your header and content in a flex container and set the content to flex: 1: https://jsfiddle.net/j4sLgh0o/

edited Nov 14 '18 at 12:34

answered Nov 14 '18 at 12:29

Dominic

26.5k106890

One of the reasons to use flex is to not specify fixed dimensions. flex: 1 (or flex-shrink, flex-grow, flex-basis) can be used to fill available width or height:

.container {

  display: flex;

  flex-direction: column;

  

  /* for demo purposes */

  height: 300px;

  border: 1px solid red;

}



header {

  padding: 20px;

}



.content {

  flex: 1;

  background-color: #f0f0f0;

}

<div class="container">

  <header>Header of any height</header>

  <div class="content">Content which fills remaining height</div>

</div>

So you should wrap your header and content in a flex container and set the content to flex: 1: https://jsfiddle.net/j4sLgh0o/

.container {

  display: flex;

  flex-direction: column;

  

  /* for demo purposes */

  height: 300px;

  border: 1px solid red;

}



header {

  padding: 20px;

}



.content {

  flex: 1;

  background-color: #f0f0f0;

}

<div class="container">

  <header>Header of any height</header>

  <div class="content">Content which fills remaining height</div>

</div>

.container {

  display: flex;

  flex-direction: column;

  

  /* for demo purposes */

  height: 300px;

  border: 1px solid red;

}



header {

  padding: 20px;

}



.content {

  flex: 1;

  background-color: #f0f0f0;

}

<div class="container">

  <header>Header of any height</header>

  <div class="content">Content which fills remaining height</div>

</div>

edited Nov 14 '18 at 12:34

answered Nov 14 '18 at 12:29

Dominic

26.5k106890

edited Nov 14 '18 at 12:34

answered Nov 14 '18 at 12:29

Dominic

26.5k106890

answered Nov 14 '18 at 12:29

Dominic

26.5k106890

answered Nov 14 '18 at 12:29

Dominic

26.5k106890

add a comment |

You don't need a fixed height or calc(). Flex properties are good enough (plus a minor hack for the scroll function to activate in Edge and Firefox).

body {

  display: flex;

  flex-direction: column;

  height: 100vh;

  margin: 0;

}



header {

  flex: 0 0 4em; /* flex-basis can be anything */

  background-color: lightgreen;

}



.flex-container {

  display: flex;

  background: #CCCCCC;



 /* for Edge and FF */

  height: 1px; /* these browsers won't trigger an overflow without a fixed height */

  flex-grow: 1;

}



.column {

  flex: 0 0 9em;

  background: #fff;

  overflow-y: auto;

}





div {

  border: 1px solid #000;

}

* {

  box-sizing: border-box;

}

<header></header>

<div class="flex-container">

  <div class="column">Some content</div>

  <div class="column">more content</div>

  <div class="column">

    So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content

    it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable

    So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more

    content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's

    unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable

    So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more

    content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's

    unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable

  </div>

  <div class="column"></div>

  <div class="column">Some content</div>

</div>

answered Nov 14 '18 at 12:32

Michael_B

145k47232340

add a comment |

You don't need a fixed height or calc(). Flex properties are good enough (plus a minor hack for the scroll function to activate in Edge and Firefox).

body {

  display: flex;

  flex-direction: column;

  height: 100vh;

  margin: 0;

}



header {

  flex: 0 0 4em; /* flex-basis can be anything */

  background-color: lightgreen;

}



.flex-container {

  display: flex;

  background: #CCCCCC;



 /* for Edge and FF */

  height: 1px; /* these browsers won't trigger an overflow without a fixed height */

  flex-grow: 1;

}



.column {

  flex: 0 0 9em;

  background: #fff;

  overflow-y: auto;

}





div {

  border: 1px solid #000;

}

* {

  box-sizing: border-box;

}

<header></header>

<div class="flex-container">

  <div class="column">Some content</div>

  <div class="column">more content</div>

  <div class="column">

    So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content

    it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable

    So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more

    content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's

    unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable

    So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more

    content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's

    unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable

  </div>

  <div class="column"></div>

  <div class="column">Some content</div>

</div>

answered Nov 14 '18 at 12:32

Michael_B

145k47232340

add a comment |

You don't need a fixed height or calc(). Flex properties are good enough (plus a minor hack for the scroll function to activate in Edge and Firefox).

body {

  display: flex;

  flex-direction: column;

  height: 100vh;

  margin: 0;

}



header {

  flex: 0 0 4em; /* flex-basis can be anything */

  background-color: lightgreen;

}



.flex-container {

  display: flex;

  background: #CCCCCC;



 /* for Edge and FF */

  height: 1px; /* these browsers won't trigger an overflow without a fixed height */

  flex-grow: 1;

}



.column {

  flex: 0 0 9em;

  background: #fff;

  overflow-y: auto;

}





div {

  border: 1px solid #000;

}

* {

  box-sizing: border-box;

}

<header></header>

<div class="flex-container">

  <div class="column">Some content</div>

  <div class="column">more content</div>

  <div class="column">

    So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content

    it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable

    So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more

    content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's

    unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable

    So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more

    content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's

    unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable

  </div>

  <div class="column"></div>

  <div class="column">Some content</div>

</div>

answered Nov 14 '18 at 12:32

Michael_B

145k47232340

You don't need a fixed height or calc(). Flex properties are good enough (plus a minor hack for the scroll function to activate in Edge and Firefox).

body {

  display: flex;

  flex-direction: column;

  height: 100vh;

  margin: 0;

}



header {

  flex: 0 0 4em; /* flex-basis can be anything */

  background-color: lightgreen;

}



.flex-container {

  display: flex;

  background: #CCCCCC;



 /* for Edge and FF */

  height: 1px; /* these browsers won't trigger an overflow without a fixed height */

  flex-grow: 1;

}



.column {

  flex: 0 0 9em;

  background: #fff;

  overflow-y: auto;

}





div {

  border: 1px solid #000;

}

* {

  box-sizing: border-box;

}

<header></header>

<div class="flex-container">

  <div class="column">Some content</div>

  <div class="column">more content</div>

  <div class="column">

    So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content

    it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable

    So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more

    content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's

    unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable

    So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more

    content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's

    unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable

  </div>

  <div class="column"></div>

  <div class="column">Some content</div>

</div>

body {

  display: flex;

  flex-direction: column;

  height: 100vh;

  margin: 0;

}



header {

  flex: 0 0 4em; /* flex-basis can be anything */

  background-color: lightgreen;

}



.flex-container {

  display: flex;

  background: #CCCCCC;



 /* for Edge and FF */

  height: 1px; /* these browsers won't trigger an overflow without a fixed height */

  flex-grow: 1;

}



.column {

  flex: 0 0 9em;

  background: #fff;

  overflow-y: auto;

}





div {

  border: 1px solid #000;

}

* {

  box-sizing: border-box;

}

<header></header>

<div class="flex-container">

  <div class="column">Some content</div>

  <div class="column">more content</div>

  <div class="column">

    So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content

    it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable

    So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more

    content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's

    unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable

    So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more

    content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's

    unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable

  </div>

  <div class="column"></div>

  <div class="column">Some content</div>

</div>

body {

  display: flex;

  flex-direction: column;

  height: 100vh;

  margin: 0;

}



header {

  flex: 0 0 4em; /* flex-basis can be anything */

  background-color: lightgreen;

}



.flex-container {

  display: flex;

  background: #CCCCCC;



 /* for Edge and FF */

  height: 1px; /* these browsers won't trigger an overflow without a fixed height */

  flex-grow: 1;

}



.column {

  flex: 0 0 9em;

  background: #fff;

  overflow-y: auto;

}





div {

  border: 1px solid #000;

}

* {

  box-sizing: border-box;

}

<header></header>

<div class="flex-container">

  <div class="column">Some content</div>

  <div class="column">more content</div>

  <div class="column">

    So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content

    it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable

    So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more

    content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's

    unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable

    So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more

    content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's

    unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable

  </div>

  <div class="column"></div>

  <div class="column">Some content</div>

</div>

answered Nov 14 '18 at 12:32

Michael_B

145k47232340

answered Nov 14 '18 at 12:32

Michael_B

145k47232340

answered Nov 14 '18 at 12:32

Michael_B

145k47232340

answered Nov 14 '18 at 12:32

Michael_B

145k47232340

add a comment |

.container{

    display: flex;

    flex-direction: column;

    height: 100vh;

    background: green

}

.content{

    flex: 1;

    background: red

}

<div class="container">

    <div>Header here</div>

    <div class="content">Content here</div>

</div>

edited Nov 14 '18 at 12:45

answered Nov 14 '18 at 12:39

faraz foroughi

add a comment |

.container{

    display: flex;

    flex-direction: column;

    height: 100vh;

    background: green

}

.content{

    flex: 1;

    background: red

}

<div class="container">

    <div>Header here</div>

    <div class="content">Content here</div>

</div>

edited Nov 14 '18 at 12:45

answered Nov 14 '18 at 12:39

faraz foroughi

add a comment |

.container{

    display: flex;

    flex-direction: column;

    height: 100vh;

    background: green

}

.content{

    flex: 1;

    background: red

}

<div class="container">

    <div>Header here</div>

    <div class="content">Content here</div>

</div>

edited Nov 14 '18 at 12:45

answered Nov 14 '18 at 12:39

faraz foroughi

.container{

    display: flex;

    flex-direction: column;

    height: 100vh;

    background: green

}

.content{

    flex: 1;

    background: red

}

<div class="container">

    <div>Header here</div>

    <div class="content">Content here</div>

</div>

.container{

    display: flex;

    flex-direction: column;

    height: 100vh;

    background: green

}

.content{

    flex: 1;

    background: red

}

<div class="container">

    <div>Header here</div>

    <div class="content">Content here</div>

</div>

.container{

    display: flex;

    flex-direction: column;

    height: 100vh;

    background: green

}

.content{

    flex: 1;

    background: red

}

<div class="container">

    <div>Header here</div>

    <div class="content">Content here</div>

</div>

edited Nov 14 '18 at 12:45

answered Nov 14 '18 at 12:39

faraz foroughi

edited Nov 14 '18 at 12:45

answered Nov 14 '18 at 12:39

faraz foroughi

answered Nov 14 '18 at 12:39

faraz foroughi

answered Nov 14 '18 at 12:39

faraz foroughi

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Agfdhyk