Question 386494 in Html Question posted in
Some basic documentation can be found here.

Html – Creating Scrollable Flexbox Child Without Fixed Heights for Variable Navbar

I am having a hard time getting my .panel_right to be scrollable without hardcoding a px value inside the calc to account for the .navbar height. Currently this HTML creates two scrollbars. The HTML is being sideloaded/injected into a website with this .navbar already in it. I did not define or have access to the navbar, so I cannot assume it’s height as it may change in the future.

I do not want to have any calcs to account for the navbar.

  .navbar {
      display: flex;
      height:50px; /* Assume fixed, external from our code, and it can change */
      background-color: red;
  }

    .container {
      display: flex;
      flex-direction: column;
      height: 100vh;
      background-color: blue;
    }

    .panel_top {
      background-color: grey;
      width: 100%;
      height: 30px;
    }

    .panel_right {
      width: 100px;
      background-color: green;
      max-height: calc(100vh - 30px); /* remaining height after panel_top */
      overflow-y: scroll;
    }
<body style="width: 100vw; height: 100vh; margin:0;padding:0">
  <div class="navbar">
    <li>navbar item</li>
    <li>navbar item</li>
    <li>navbar item</li>
  </div>
  <div style="container">
    <div class="panel_top">panel_top</div>
    <div style="min-height: 0;">
      <div class="panel_right">
        <h1>panel_right</h1>
        <h1>panel_right</h1>
        <h1>panel_right</h1>
        <h1>panel_right</h1>
        <h1>panel_right</h1>
        <h1>panel_right</h1>
        <h1>panel_right</h1>
        <h1>panel_right</h1>
      </div>
    </div>
  </div>
Tags:

2

Answers


  1. 0 
    <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  
<div class="container">
  
  <div class="navbar">
    <li>navbar item</li>
    <li>navbar item</li>
    <li>navbar item</li>
  </div>

  <div class="panel_top">panel_top</div>
        
  <div class="panel_right">
    <h1>panel_right</h1>
    <h1>panel_right</h1>
    <h1>panel_right</h1>
    <h1>panel_right</h1>
    <h1>panel_right</h1>
    <h1>panel_right</h1>
    <h1>panel_right</h1>
    <h1>panel_right</h1>
  </div>
  
</div>
  
</body>
</html>

    html,body  {
  margin: 0px;
  padding: 0px;
}

.container {
  display: grid;
  grid-template-rows: 40px 40px auto;
  grid-template-columns: 200px auto;
  overflow: auto;
  height: 100vh;
}

.navbar {
  grid-row: 1/2;
  grid-column: 1/-1;
  background: red;
}

.panel_top {
  grid-row: 2/3;
  grid-column: 1/-1;
  background: gray;
}

.panel_right {
  grid-row: 3/-1;
  grid-column: 1/2;
  background: green;
  overflow: auto;
}
    Login or Signup to reply.
  2. 0

    If you gradually push away from the flexible body, then everything will work out:

    * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

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

.navbar {
  display: flex;
  min-height: 50px;
  background-color: red;
}

.container {
  display: flex;
  flex-direction: column;
  flex:auto;
  background-color: blue;
  min-height: 0;
}
 
.main{
  flex: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.panel_top {
  background-color: grey;
  min-height: 30px;
}

.panel_right {
  width: 100px;
  background-color: green;
  overflow-y: scroll;
  flex: auto;
  min-height: 0;
}
    <div class="navbar">
 <li>navbar item</li>
 <li>navbar item</li>
 <li>navbar item</li>
</div>
<div class="container">
 <div class="panel_top">panel_top</div>
 <div class="main">
  <div class="panel_right">
    <h1>panel_right</h1>
    <h1>panel_right</h1>
    <h1>panel_right</h1>
    <h1>panel_right</h1>
    <h1>panel_right</h1>
    <h1>panel_right</h1>
    <h1>panel_right</h1>
    <h1>panel_right</h1>
  </div>
 </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search