overflow not respecting max height and width

Question

For the following code, I'm trying to make it so that whatever doesn't fully fit inside the magenta square (.body), it will overflow (with scrollbar) and still produce a neat layout.

However, when I try to throw something really large into that box, it just overflow (without scrollbar) and messes up the design. How can i solve this?

 * {
  box-sizing: border-box;
 }
 .grid-test {
  display: grid;
  grid-template-rows: 1fr 9fr;
  height: 100%;
  width: 100%;
  max-height: 100%;
  max-width: 100%;
 }

 .first {
  border: 10px solid blue;
 }
 .second {
  border: 10px solid red;
 }

 .wrapper {
  display: grid;
  grid-template-rows: 1fr 9fr;
  height: 100%;
  border: 10px solid orange;
  max-height: 100%;
  max-width: 100%;
 }
  .sub-header {
   border: 10px solid lightblue;
 }
  .body {
    // background-color: magenta;
    border: 10px solid magenta;
    overflow: hidden;
    max-height: 100%;
    max-width: 100%;
  }
  
  .canvas {
    //width: 2000px;
    //height: 1500px;
    background-color: purple;
    overflow: auto;
  }

 <div style="height: 100vh; width: 100vw; position: fixed; left: 0; top: 0; max-width: 100vw">
  <div class="grid-test">
   <div class="first">
   </div>
   <div
    class="second"
   >
    <div
     class="wrapper"
    >
     <div class="sub-header"></div>
     <div class="body">
      <div class="canvas"></div>
     </div>
    </div>
   </div>
  </div>
 </div>

After placing a large element into it

* {
  box-sizing: border-box;
 }
 .grid-test {
  display: grid;
  grid-template-rows: 1fr 9fr;
  height: 100%;
  width: 100%;
  max-height: 100%;
  max-width: 100%;
 }

 .first {
  border: 10px solid blue;
 }
 .second {
  border: 10px solid red;
 }

 .wrapper {
  display: grid;
  grid-template-rows: 1fr 9fr;
  height: 100%;
  border: 10px solid orange;
  max-height: 100%;
  max-width: 100%;
 }
  .sub-header {
   border: 10px solid lightblue;
 }
  .body {
    // background-color: magenta;
    border: 10px solid magenta;
    overflow: hidden;
    max-height: 100%;
    max-width: 100%;
  }
  
  .canvas {
    width: 2000px;
    height: 1500px;
    background-color: purple;
    overflow: auto;
  }

<div style="height: 100vh; width: 100vw; position: fixed; left: 0; top: 0; max-width: 100vw">
  <div class="grid-test">
   <div class="first">
   </div>
   <div
    class="second"
   >
    <div
     class="wrapper"
    >
     <div class="sub-header"></div>
     <div class="body">
      <div class="canvas"></div>
     </div>
    </div>
   </div>
  </div>
 </div>

Can you be more precise about what behavior you are looking for? You say that you want the content to overflow, but then you complain that it overflows. — user984003, Apr 18 '20 at 15:13
@user984003 the second one should produce a scrollbar, so that overall design still looks like the first example. You can see that the borders on the bottom are missing in the second example (stretched beyond the screen). — A. L, Apr 18 '20 at 15:19

score 0 · Answer 1 · answered Apr 18 '20 at 16:02

0

I found another answer, although it wasn't related to grid, it helped me do what I wanted to achieve

nested flexbox height vs max-height

answered Apr 18 '20 at 16:02

A. L

11,695
23
85
163

overflow not respecting max height and width

1 Answers1