How to get a flexbox to fill 100% of the height

Question

I have a User interfact setup but the flexbox is not expanding all the way downwards. As we can see I am trying to get a 25% / 75% split between the sections vertically and I want the sections to take the rest of space downwards but it only goes as far as the lowest element in either of the sections.

I've tried height: 100% but that does not seem to work. Not sure what to do from here.

#horizontalTake {
    height: 100%;
}

#container {
    display: flex;
    flex-wrap: wrap;
    height: 100%;
    flex-direction: row;
}


#side {
    flex: 25%;
    background-color: #f1f1f1;
    justify-content: center;
    padding-top: 35px;
}


#main {

    flex: 75%;
    background-color: #e1e6ed;
    justify-content: center;
}

              <div id = 'horizontalTake'>
                    <div id = "container">
                        <div id = "side">
                            <center>
                                <h3> TestOne </h3>
                            </center>
                        </div>
                        
                        <div id = "main">
                            <center>
                               <h3> TestTwo </h3>
                            </center>

                        </div>

                    </div>
                </div>

Irin · Accepted Answer · 2019-07-05T03:21:09.497

1

instead of using 100% use 100vh this will take full height of the window and flex-direction: row; will set instead of row

#horizontalTake {
  height: 100%;
}

#container {
  display: flex;
  height: 100vh;
  flex-direction: row;
  position: relative;
}

#side {
  flex-shrink: 0;
  flex: 25%;
  background-color: #f1f1f1;
  justify-content: center;
  padding-top: 35px;
}

#main {
  flex-shrink: 0;
  flex: 75%;
  background-color: #e1e6ed;
  justify-content: center;
}

<div id='horizontalTake'>
  <div id="container">
    <div id="side">
      <center>

        <h3> Day Overview </h3>
      </center>
    </div>

    <div id="main">
      <center>
        <h3> Test </h3>
      </center>

    </div>

  </div>
</div>

edited Jul 05 '19 at 03:21

answered Jul 05 '19 at 02:57

Irin

1,274
1
8
9

Hi sorry, I updated my code to show the code I meant to post. I think you got to my problem before I updated my code. – WhatManHasMade Jul 05 '19 at 03:10
no prob. i guess my code is working for you. isn't it? if not please tell me where i have miss? i will fix that @WhatManHasMade – Irin Jul 05 '19 at 03:13
Im trying to get my sections to split horizontally so like | - | ----- | and take up the remaining height of the screen. If you look at my edited code in the problem statement, it will give you a better idea. Your code is splitting it vertically, but thats not your fault since that was my old code. Was hoping you could help me with my updated code. Thanks! – WhatManHasMade Jul 05 '19 at 03:18
I have update the code. is that what you want? – Irin Jul 05 '19 at 03:21
my pleasure. please accept my answer as an accepted answer :) – Irin Jul 05 '19 at 03:29

How to get a flexbox to fill 100% of the height

1 Answers1