Grid Layout Escaping The Screen-CodePudding

The goal: I have a grid layout in a fixed position overlay. I want the contents of the grid to be scrollable whenever it would instead go out of bounds of the overlay (not just the screen).

The problem: Grid content just goes right off the screen.

Any and all help is appreciated!

The code: https://jsfiddle.net/u8rdxq05/12/

.overlay {
  position: fixed;
  width: 75%;
  height: 75%;
  top: 12.5%;
  background-color: #ffffffaa;
  cursor: pointer;
  margin: 0 180px;
  border: 3px solid lightgray;
  border-radius: 2vh;
  z-index: 100;
}

#brand_totals_display {
  height: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: auto;
  color: white;
}

.section_total {
  height: min(200px, 33vh);
  width: min(200px, 33vw);
  border-radius: 10px;
  padding: 0;
  margin: 5px;
  justify-self: center;
  text-align: center;
}

.bigger_font {
  font-size: 40px;
}

<div id="brand_info_overlay"  style="display: block;">
  <div id="brand_info_overlay_inner">
    <div id="brand_totals_display">
      <div  style="background-color: #F6000088">
        Tile 1:
        <div>
          <span >3</span>
        </div>
      </div>
      <div  style="background-color: #FF8C0088">
        Tile 2:
        <div>
          <span >3</span>
        </div>
      </div>
      <div  style="background-color: #d600bd88">
        Tile 3:
        <div>
          <span >3</span>
        </div>
      </div>
      <div  style="background-color: #4DE94C88">
        Tile 4:
        <div>
          <span >2</span>
        </div>
      </div>
      <div  style="background-color: #3783FF88">
        Tile 5:
        <div>
          <span >2</span>
        </div>
      </div>
      <div  style="background-color: #4815AA88">
        Tile 6:
        <div>
          <span >0</span>
        </div>
      </div>
      <div  style="background-color: #03dbfc88">
        Tile 7:
        <div>
          <span >0</span>
        </div>
      </div>
      <div  style="background-color: #F6000088">
        Tile 8:
        <div>
          <span >0</span>
        </div>
      </div>
      <div  style="background-color: #FF8C0088">
        Tile 9:
        <div>
          <span >0</span>
        </div>
      </div>
      <div  style="background-color: #d600bd88">
        Tile 10:
        <div>
          <span >1</span>
        </div>
      </div>
      <div  style="background-color: #4DE94C88">
        Tile 11:
        <div>
          <span >3</span>
        </div>
      </div>
      <div  style="background-color: #3783FF88">
        Tile 12:
        <div>
          <span >1</span>
        </div>
      </div>
      <div  style="background-color: #4815AA88">
        Tile 13:
        <div>
          <span >0</span>
        </div>
      </div>
      <div  style="background-color: #03dbfc88">
        Tile 14:
        <div>
          <span >1</span>
        </div>
      </div>
      <div  style="background-color: #F6000088">
        Tile 15:
        <div>
          <span >19</span>
        </div>
      </div>
    </div>
  </div>
</div>

CodePudding user response：

It seems you can simply add overflow-y: scroll; (or overflow-y: auto) to your CSS:

let D = document,
  select = D.querySelector('select');

select.addEventListener('change', (e) => {
  D.querySelector('.overlay').style.overflowY = e.currentTarget.value;
});

.overlay {
  position: fixed;
  width: 75%;
  height: 75%;
  top: 12.5%;
  background-color: #ffffffaa;
  cursor: pointer;
  margin: 0 180px;
  border: 3px solid lightgray;
  border-radius: 2vh;
  z-index: 100;
  overflow-y: auto;
}

#brand_totals_display {
  height: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: auto;
  color: white;
}

.section_total {
  height: min(200px, 33vh);
  width: min(200px, 33vw);
  border-radius: 10px;
  padding: 0;
  margin: 5px;
  justify-self: center;
  text-align: center;
}

.bigger_font {
  font-size: 40px;
}

<form>
  <fieldset>
    <legend>Change overflow-behaviour</legend>
    <label>Set overflow-behaviour to:
  <select>
    <option value="-1" disabled selected>Please select</option>
    <option>auto</option>
    <option>clip</option>
    <option>hidden</option>
    <option>scroll</option>
    <option>visible</option>
  </select>
  </label>
  </fieldset>
</form>
<div id="brand_info_overlay"  style="display: block;">
  <div id="brand_info_overlay_inner">
    <div id="brand_totals_display">
      <div  style="background-color: #F6000088">
        Tile 1:
        <div>
          <span >3</span>
        </div>
      </div>
      <div  style="background-color: #FF8C0088">
        Tile 2:
        <div>
          <span >3</span>
        </div>
      </div>
      <div  style="background-color: #d600bd88">
        Tile 3:
        <div>
          <span >3</span>
        </div>
      </div>
      <div  style="background-color: #4DE94C88">
        Tile 4:
        <div>
          <span >2</span>
        </div>
      </div>
      <div  style="background-color: #3783FF88">
        Tile 5:
        <div>
          <span >2</span>
        </div>
      </div>
      <div  style="background-color: #4815AA88">
        Tile 6:
        <div>
          <span >0</span>
        </div>
      </div>
      <div  style="background-color: #03dbfc88">
        Tile 7:
        <div>
          <span >0</span>
        </div>
      </div>
      <div  style="background-color: #F6000088">
        Tile 8:
        <div>
          <span >0</span>
        </div>
      </div>
      <div  style="background-color: #FF8C0088">
        Tile 9:
        <div>
          <span >0</span>
        </div>
      </div>
      <div  style="background-color: #d600bd88">
        Tile 10:
        <div>
          <span >1</span>
        </div>
      </div>
      <div  style="background-color: #4DE94C88">
        Tile 11:
        <div>
          <span >3</span>
        </div>
      </div>
      <div  style="background-color: #3783FF88">
        Tile 12:
        <div>
          <span >1</span>
        </div>
      </div>
      <div  style="background-color: #4815AA88">
        Tile 13:
        <div>
          <span >0</span>
        </div>
      </div>
      <div  style="background-color: #03dbfc88">
        Tile 14:
        <div>
          <span >1</span>
        </div>
      </div>
      <div  style="background-color: #F6000088">
        Tile 15:
        <div>
          <span >19</span>
        </div>
      </div>
    </div>
  </div>
</div>

References:

overflow.
overflow-y.

CodePudding user response：

try to use iframe

MainFile:

<div id="brand_info_overlay"  style="display: block;">
    <iframe id="MyIframe" src="Iframe.html">
</div>

#MyIframe{
    height: 100%;
    width: 100%;
    border-style: none;
}

Content of your grid put in other file called Iframe.html like i did

Contentfile:

<html>
<head>
    <link rel="stylesheet" href="istyle.css">
</head>
<body>
    <div id="brand_info_overlay_inner">
        <div id="brand_totals_display">
                <div  style="background-color: #F6000088">
                    Tile 1:
                    <div>
                        <span >3</span>
                    </div>
                </div>
                <div  style="background-color: #FF8C0088">
                    Tile 2:
                    <div>
                        <span >3</span>
                    </div>
                </div>
                <div  style="background-color: #d600bd88">
                    Tile 3:
                    <div>
                        <span >3</span>
                    </div>
                </div>
                <div  style="background-color: #4DE94C88">
                    Tile 4:
                    <div>
                        <span >2</span>
                    </div>
                </div>
                <div  style="background-color: #3783FF88">
                    Tile 5:
                    <div>
                        <span >2</span>
                    </div>
                </div>
                <div  style="background-color: #4815AA88">
                    Tile 6:
                    <div>
                        <span >0</span>
                    </div>
                </div>
                <div  style="background-color: #03dbfc88">
                    Tile 7:
                    <div>
                        <span >0</span>
                    </div>
                </div>
                <div  style="background-color: #F6000088">
                   Tile 8:
                    <div>
                        <span >0</span>
                    </div>
                </div>
                <div  style="background-color: #FF8C0088">
                    Tile 9:
                    <div>
                        <span >0</span>
                    </div>
                </div>
                <div  style="background-color: #d600bd88">
                    Tile 10:
                    <div>
                        <span >1</span>
                    </div>
                </div>
                <div  style="background-color: #4DE94C88">
                    Tile 11:
                    <div>
                        <span >3</span>
                    </div>
                </div>
                <div  style="background-color: #3783FF88">
                    Tile 12:
                    <div>
                        <span >1</span>
                    </div>
                </div>
                <div  style="background-color: #4815AA88">
                    Tile 13:
                    <div>
                        <span >0</span>
                    </div>
                </div>
                <div  style="background-color: #03dbfc88">
                    Tile 14:
                    <div>
                        <span >1</span>
                    </div>
                </div>
                <div  style="background-color: #F6000088">
                    Tile 15:
                    <div>
                        <span >19</span>
                    </div>
                </div>
        </div>
        </div>
</body>
</html>

.overlay {
    position: fixed;
    width: 75%;
    height: 75%;
    top: 12.5%;
    background-color: #ffffffaa;
    cursor: pointer;

    align-self:center;
    border: 3px solid lightgray;
    border-radius: 2vh;
    z-index: 100;
}

#brand_totals_display {

    
    height: 100%;
    width: 100%;
    display: grid;
    grid-template-columns:auto auto auto;
    grid-auto-rows: auto;
    color: white;
}

.section_total {
    height: min(200px, 33vh);
    width: min(200px, 33vw);
    border-radius: 10px;
    padding: 0;
    margin: 5px;
    justify-self: center;
    text-align: center;
}

.bigger_font {
    font-size: 40px;
}