Non-stop increasing width after setting proportional sized boxes in js

I tried setting each box' height to be proportional to the set width. The width is in percent, different depending on browser width. it works great when the box' width is less than 100%. Once they are 100% however, they wont stop expanding when the browser's width changes. Even the container "games" expands, and setting a fixed width doesn't help. How do I fix this?

window.onload = boxResize;
window.onresize = boxResize;
var i; //Variable for loop, not important.
var box = document.getElementsByClassName("box");

//Sets the width of each box depending on the browser's width
function boxResize(){
    if(window.innerWidth > 1400){
        boxResizeF(0.333);
    }
    else if(window.innerWidth <= 1400 && window.innerWidth > 980){
        boxResizeF(0.5);
    }
    else if(window.innerWidth <= 980){
        boxResizeF(1); //This is where problems start to occur!
    }
}

//Resizes each box so that the height is proportional to its width.
function boxResizeF(percentage){
    var gamesEl = document.getElementById("games"); //This is the container of the "box" element.
    var gamesElWidth = gamesEl.offsetWidth; //Width of container
    
    for(i = 0; i < box.length; i++){
        var boxWidth = gamesElWidth * percentage; //Set the width of each box in percent.
        box[i].style.width = boxWidth + "px"; //Set width
        var boxRatio = 9/16;
        var boxHeight = boxWidth * boxRatio;
        box[i].style.height = boxHeight + "px"; //Set height
    }
}
.box{
    display: table; float: left; box-sizing: border-box;
    background: black;
    border: 1px solid red;
}
#games{
    display: table;
    width: 80%; height: auto;
    margin: auto;
        border: 1px solid blue;
}

@media screen and (max-width: 980px){
    #games{
        width:100%;
    }
}
<div id="games">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>

1 answer

  • answered 2017-06-17 19:24 Daniel H

    Add box-sizing: border-box;?

    window.onload = boxResize;
    window.onresize = boxResize;
    var i; //Variable for loop, not important.
    var box = document.getElementsByClassName("box");
    
    //Sets the width of each box depending on the browser's width
    function boxResize() {
      if (window.innerWidth > 1400) {
        boxResizeF(0.333);
      } else if (window.innerWidth <= 1400 && window.innerWidth > 980) {
        boxResizeF(0.5);
      } else if (window.innerWidth <= 980) {
        boxResizeF(1); //This is where problems start to occur!
      }
    }
    
    //Resizes each box so that the height is proportional to its width.
    function boxResizeF(percentage) {
      var gamesEl = document.getElementById("games"); //This is the container of the "box" element.
      var gamesElWidth = gamesEl.offsetWidth; //Width of container
    
      for (i = 0; i < box.length; i++) {
        var boxWidth = gamesElWidth * percentage; //Set the width of each box in percent.
        box[i].style.width = boxWidth + "px"; //Set width
        var boxRatio = 9 / 16;
        var boxHeight = boxWidth * boxRatio;
        box[i].style.height = boxHeight + "px"; //Set height
      }
    }
    .box {
      display: table;
      float: left;
      box-sizing: border-box;
      background: black;
      border: 1px solid red;
    }
    
    #games {
      display: table;
      width: 80vw;
      height: auto;
      margin: auto;
      border: 1px solid blue;
      box-sizing: border-box;
    }
    
    @media screen and (max-width: 980px) {
      #games {
        width: 100vw;
        box-sizing: border-box;
      }
    }
    <div id="games">
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
    </div>