javascript - How to Prevent Elements from Wrapping with DOM

Question

I can't seem to stop these blocks from wrapping. The grid seems to work fine for inputs less than 50.

This is my HTML but there's not much too it, even tried the whitespace property, inline. The CSS, which I have made a parent div and it seems to work for the colour, however not for turning off the wrap.

How can I get the rows of boxes to continue?

enter image description here

let makeGrid = function(numberOfRows) {
  let y = 0;
  let x = 0;

  while (y < numberOfRows) {
    x = 0;

    let makeBox = function(_parentBox, _sizeOfBox) {
      let box = document.createElement('div');
      document.body.appendChild(box);
      box.style.width = '28px';
      box.style.height = '28px';
      box.style.border = '1px solid white';
      box.style.display = 'inline-block';
      return box;
    };

    let makeRowBox = function(parentBox) {
      let box = document.createElement('div');
      parentBox.appendChild(box);
      //box.style.border = '1px solid black';
      return box;
    };

    rowBox = makeRowBox(document.body);

    while (x < numberOfRows) {
      makeBox(rowBox, 400);
      x = x + 1;
    }

    y = y + 1;
  }
};

makeGrid(50);

div {
  background-color: rgb(68, 157, 230);
  white-space: nowrap;
  overflow: hidden;
}

div>div {
  display: inline-block;
  border: 2px solid white;
  border: '1px solid black';
  margin-right: 4px;
}

<div style="white-space: nowrap;"></div>

标签： javascriptcssdom

Answer 1

You can style the boxRows using display: inline-flex, so the rows will expand to fit their contents.

I removed all the inline CSS that were set in javascript. Instead, I added a class to the boxes.

You also added all the blue boxes to body instead of .row (rowBox).

I needed the combination of float and clear to make smaller grids row break.

let makeGrid = function(numberOfRows) {
  let y = 0;
  let x = 0;

  while (y < numberOfRows) {
    x = 0;

    let makeBox = function(_parentBox) {
      let box = document.createElement('div');
      box.classList.add("box");

      //document.body.appendChild(box);

      _parentBox.appendChild(box); /* added */
      
      //return box;
    };

    let makeRowBox = function(parentBox) {
      let box = document.createElement('div');
      box.classList.add("row");
      
      parentBox.appendChild(box);
      
      return box;
    };

    rowBox = makeRowBox(document.body);

    while (x < numberOfRows) {
      makeBox(rowBox, 400);
      x = x + 1;
    }

    y = y + 1;
  }
};

makeGrid(30);

.row {
  display: inline-flex;
  border: 1px solid black;
  clear: both;
  float: left;
}

.box {
  --box-spacing: 2px;

  width: 28px;
  height: 28px;
  background-color: rgb(68, 157, 230);
  border: var(--box-spacing) solid white;
  flex-basis: 100%;
}