-1

I have been stuck on this and frankly don't even know how to google it, all my google efforts were fruitless. My HTML is as below:

<div class="uk-flex uk-flex-column uk-height-1-1">
    <!-- normal div with height 100vh and flexbox of flex column -->

    <div>div that will have height fit contents</div>

    <div class="uk-flex-1">
        <!-- div that will fill the remaining space -->

        <div class="uk-height-1-1">div that should fill the height of the parent</div>
    </div>

    <div>div that will have height fit content</div>
</div>

Now my main problem is having the grand child div (.uk-height-1-1) to have its height fill the parent, how do I make its height fill the height of the parent div??

NOTE: The below links of questions I have been through them before, they do not answer my question

Fill remaining vertical space with CSS using display:flex

Make a div fill the height of the remaining screen space

UPDATE: Am using uikit, I posted the question initially the way it is to simplify the question, uk-height-1-1 = height: 100%

lulliezy
  • 1,741
  • 5
  • 24
  • 49
  • Can you update with your css? Are you trying to set class="viewport-height flex-column" as a flex-direction column? And you just want flex-1 to be full height? – ShrewdStyle Mar 29 '20 at 10:12
  • @ShrewdStyle i posted the question how it was before just for simplification, but i have updated it, just have a look and if you need more clarification please let me know – lulliezy Mar 29 '20 at 10:21
  • don't repeat the question – Temani Afif Mar 29 '20 at 10:25

2 Answers2

0

Best way to tackle something like this is assign borders to things when you are trying to see how the layout is

.viewport-height {
  display: flex;
  border: 1px solid blue;
  height: 500px;
}
.flex-1 {
  border: 1px solid red;
}
.full-height {
  border: 1px solid greenyellow;
  height: 100%;
}

If you look in the css above the .full-height is now the same height as the flex-1

ShrewdStyle
  • 500
  • 2
  • 5
  • 14
0

If I understood your question, then this should be what you are looking for. Let me know if you need any additional help.

.viewport-height {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.flex-1 {
  display: flex;
  flex: 1;
  background-color: green;
  align-items: center;
}

.div-with-height {
  height: 50px;
}

full-height {
  height: 100%;
}
<div class="viewport-height flex-column">
  <!-- normal div with height 100vh and flexbox of flex column -->

  <div class="div-with-height">div that will have height fit contents</div>

  <div class="flex-1">
    <!-- div that will fill the remaining space -->

    <div class="full-height">div that should fill the height of the parent</div>
  </div>

  <div class="div-with-height">div that will have height fit content</div>
</div>
Prabin Poudel
  • 244
  • 3
  • 15