Flexbox height Constraint 100% of available space












0














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>








html css css3 flexbox







share|improve this question
























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
















0














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>








html css css3 flexbox







share|improve this question
























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














0












0








0







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>








html css css3 flexbox







share|improve this question















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>








* {

  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




html css css3 flexbox






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 14 '18 at 12:37









Michael_B

145k47232340




145k47232340










asked Nov 14 '18 at 12:19









Felix

65111




65111












  • 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
















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












3 Answers
3






active

oldest

votes


















2














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/






share|improve this answer































    0














    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>








    share|improve this answer





























      0














      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>








      share|improve this answer























        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


















        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















        Required, but never shown

























        3 Answers
        3






        active

        oldest

        votes








        3 Answers
        3






        active

        oldest

        votes









        active

        oldest

        votes






        active

        oldest

        votes









        2














        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/






        share|improve this answer




























          2














          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/






          share|improve this answer


























            2












            2








            2






            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/






            share|improve this answer














            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>






            share|improve this answer














            share|improve this answer



            share|improve this answer








            edited Nov 14 '18 at 12:34

























            answered Nov 14 '18 at 12:29









            Dominic

            26.5k106890




            26.5k106890

























                0














                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>








                share|improve this answer


























                  0














                  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>








                  share|improve this answer
























                    0












                    0








                    0






                    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>








                    share|improve this answer












                    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>






                    share|improve this answer












                    share|improve this answer



                    share|improve this answer










                    answered Nov 14 '18 at 12:32









                    Michael_B

                    145k47232340




                    145k47232340























                        0














                        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>








                        share|improve this answer




























                          0














                          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>








                          share|improve this answer


























                            0












                            0








                            0






                            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>








                            share|improve this answer














                            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>








                            .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>






                            share|improve this answer














                            share|improve this answer



                            share|improve this answer








                            edited Nov 14 '18 at 12:45

























                            answered Nov 14 '18 at 12:39









                            faraz foroughi

                            13




                            13






























                                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














                                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















                                Required, but never shown





















































                                Required, but never shown














                                Required, but never shown












                                Required, but never shown







                                Required, but never shown

































                                Required, but never shown














                                Required, but never shown












                                Required, but never shown







                                Required, but never shown







                                -

                                Popular posts from this blog

                                Guess what letter conforming each word

                                Image
                                6 $begingroup$ This is an entry in the Fortnightly Topic Challenge #41: Short and Sweet. 1 letter only could be mean anything . With an additional letter in front , could be used as medicine component and something you definitely learn or at least heard once. Add another letter in front , you would possibly hear that many times . Add an additional letter in front , you would found an independent country . With an additional letter, in the end , you would found something related to apple . Add another letter in the end , you would found something bad . Hint: Each letter is unique . word knowledge letters chemistry share | improve this question ...
                                Read more

                                Port of Spain

                                Image
                                For ports in the country of Spain, see List of ports in Spain. City in City of Port of Spain, Trinidad and Tobago Port of Spain City City of Port of Spain Top to bottom (left to right): Skyline of Port of Spain from Gulf of Paria; National Academy for the Performing Arts, Independence Square, Eric Williams Plaza; MovieTowne, Port of Port of Spain Motto(s):  "We Gather Strength As We Go Along" Port of Spain Coordinates: 10°40′N 61°31′W  /  10.667°N 61.517°W  / 10.667; -61.517 Coordinates: 10°40′N 61°31′W  /  10.667°N 61.517°W  / 10.667; -61.517 Country   Trinidad and Tobago Jurisdiction City of Port of Spain Settled 1560 Incorporated (town) 1853 Incorporated (city) 1914 Government  • Mayor Joel Martinez  • Governing body City Corporation Area [1]  • City 12 km 2 (5 sq mi) Elevation [2] 66 m (217 ft) Population (2011) [1]  • City 37,074  • Rank 3rd  • Density 3,090/km 2 (8,000/sq mi)...
                                Read more

                                Run scheduled task as local user group (not BUILTIN)

                                Image
                                0 I am trying to run a scheduled task with User Group (not a single user). This is working fine when I in the field "when running a task, use the following user account:" insert BUILTIN User Group (for example: Administrators or Users). But when I try it with the created Local User Group (example: TestGroup) it is not working. The Users in the TestGroup are the same as in the Administrators group. What could be the problem? Are there some restrictions to the Created User Group compared to BUILTINUsers? scheduled-tasks taskscheduler windowstaskschedule share | improve this question asked Nov 15 '18 at 15:36 Far...
                                Read more