How to implement flexbox within parent div element?

Question

I want to make my page fit to screen height, and have scrollable content inside of it, but I have encountered a problem where I can't exactly do it due to the framework I'm using (Nuxt & Buefy) generates element that I can't control.

This is how I want the page to look like

    html,
    body {
      height: 100%;
      margin: 0
    }
    .navbar {
      height: 65px;
      background: #dd7777
    }
    .box {
      display: flex;
      flex-flow: column;
      height: 100%;
    }

    .box .row {
      border: 1px dotted grey;
    }

    .box .row.header {
      flex: 0 1 auto;
    }

    .box .row.content {
      display: flex;
      flex-flow: column;
      flex: 1 1 auto;
      overflow-y: auto;
    }

    .box .row.footer {
      flex: 0 1 40px;
    }

<div class="auto-generated-top-elemennt">
      <div class="navbar">
      Something
      </div>
      <div class="main-content">
        <div class="box">
          <div class="row header">
            <p><b>header</b>
              <br />
              <br />(sized to content)</p>
          </div>
          <div class="row content">
            <p>
              <b>content</b> (fills remaining space)
            </p>
            <p>
              <b>content</b> (fills remaining space)
            </p>
            <p>
              <b>content</b> (fills remaining space)
            </p>
            <p>
              <b>content</b> (fills remaining space)
            </p>
            <p>
              <b>content</b> (fills remaining space)
            </p>
            <p>
              <b>content</b> (fills remaining space)
            </p>
            <p>
              <b>content</b> (fills remaining space)
            </p>
            <p>
              <b>content</b> (fills remaining space)
            </p>
          </div>
          <div class="row footer">
            <p><b>footer</b> (fixed height)</p>
          </div>
        </div>
      </div>
    </div>

How I want it to look like is similar to this solution but somehow it doesn't work well..

your height:100% aren't following, you need to cascade them from the html until the box (without missing any element) — Temani Afif, Apr 10 '21 at 15:20
@TemaniAfif I don't understand what you mean by that, or how to do that. I've tried to manually change the height of every single elements involved, but there's no visible result. — Zombie Chibi XD, Apr 10 '21 at 18:28

score 1 · Accepted Answer · answered Apr 10 '21 at 19:15

You will need more flexboxes

body {
  height: 100vh;
  margin: 0
}
.auto-generated-top-elemennt {
  display:flex;
  flex-direction:column;
  height:100%;
}
.main-content,
.box{
  flex:1;
  display: flex;
  flex-flow: column;
  min-height:0;
}
.navbar {
  height: 65px;
  background: #dd7777
} 
.box .row {
  border: 1px dotted grey;
}

.box .row.header {
  flex: 0 1 auto;
}

.box .row.content {
  display: flex;
  flex-flow: column;
  flex: 1 1 auto;
  overflow-y: auto;
}

.box .row.footer {
  flex: 0 1 40px;
}

<div class="auto-generated-top-elemennt">
  <div class="navbar">
    Something
  </div>
  <div class="main-content">
    <div class="box">
      <div class="row header">
        <p><b>header</b>
          <br />
          <br />(sized to content)</p>
      </div>
      <div class="row content">
        <p>
          <b>content</b> (fills remaining space)
        </p>
        <p>
          <b>content</b> (fills remaining space)
        </p>
        <p>
          <b>content</b> (fills remaining space)
        </p>
        <p>
          <b>content</b> (fills remaining space)
        </p>
        <p>
          <b>content</b> (fills remaining space)
        </p>
        <p>
          <b>content</b> (fills remaining space)
        </p>
        <p>
          <b>content</b> (fills remaining space)
        </p>
        <p>
          <b>content</b> (fills remaining space)
        </p>
      </div>
      <div class="row footer">
        <p><b>footer</b> (fixed height)</p>
      </div>
    </div>
  </div>
</div>

Does that means for every single autogenerated elements nuxt create, just for me to flex that component, I need to add that style? — Zombie Chibi XD, Apr 10 '21 at 19:54
@ZombieChibiXD yes, you need to cascade your style .. the first one need to have 100% to get the 100% of the body then you need to use flexbox for all the nested container — Temani Afif, Apr 10 '21 at 20:02

How to implement flexbox within parent div element?

1 Answers1