Can someone explain the gap between these flex element children-CodePudding

I'm trying to create a grid of div's inside of a flexbox element, yet despite my best efforts, there are still horizontal gaps between the rows of div's

(html, body set to full width; full height. No problems there)

Parent Styling:

#root{
    position: fixed;
    top: 0;
    left: 0;

    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: flex-start;

    width: 100%;
    height: 100%;
}

class for grid div's inside parent:

.grid_div{
    box-sizing: border-box;
    background: black;
    width: 58.8571px;
    height: 58.8571px;
    flex-grow: 0;
    flex-shrink: 0;
}

And here's the result:

What am I missing?

Full Document:

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>fuck off time</title>

    <style>
        html, body{
            margin: 0;
            width: 100%;
            min-height: 100vh;
        }

        #root{
            position: fixed;
            top: 0;
            left: 0;

            display: flex;
            flex-flow: row wrap;
            justify-content: flex-start;
            align-items: flex-start;

            width: 100%;
            height: 100%;

        }
    </style>

    <script src="https://openbox.city/js/nested_js.js"></script>
    <script src="https://openbox.city/js/tranzit_js.js"></script>

</head>
<body>
    <main id="root"></main>
    <script type="text/javascript">
        Nested = new nested()
        Tranzit = new tranzit()

        const root = document.querySelector('#root')

        const gridZoom = {
            gridWidth: 7,
            gridHeight: 10,
            initialize(){
                this.createGrid()
            },
            createGrid(){

                const cellDimension = root.getBoundingClientRect().width / this.gridWidth
                const cell = this.library.cell(cellDimension)
                const amountOfCells = this.gridWidth * this.gridHeight
                for(i=0;i<amountOfCells;i  ){
                    const cellClone = cell.cloneNode(true)
                    cellClone.dataset.id = i
                    root.appendChild(cellClone)
                }
            },
            library: {
                cell(dimension){
                    return Nested.parse({
                        tag: 'div',
                        attributes: {
                            class: 'grid_cell',
                            style: {
                                boxSizing: 'border-box',
                                display: 'inline-block',
                                background: 'blue',
                                border: '1px solid black',
                                width: `${dimension}px`,
                                height: `${dimension}px`,
                                flexGrow: 0,
                                flexShrink: 0
                            }
                        }
                    })
                }
            }
        }



        gridZoom.initialize()
    </script>
</body>
</html>

CodePudding user response：

Set up height to auto. It will maybe solve your problem.

 #root{
            position: fixed;
            top: 0;
            left: 0;
            display: flex;
            flex-flow: row wrap;
            justify-content: flex-start;
            align-items: flex-start;
            width: 100%;
            height: auto;

        }

CodePudding user response：

Looks fine here. I have removed the flex-grow and flex-shrink. It's hard to see the problem if I can't reproduce it. Have you tried *{margin: 0, padding: 0} or row-gap: 0 ?

                  style: {
                            boxSizing: 'border-box',
                            display: 'inline-block',
                            background: 'blue',
                            border: '1px solid black',
                            width: `${dimension}px`,
                            height: `${dimension}px`,
                        }

CodePudding user response：

Use the align-content property to control the vertical space between wrapped rows.
In your case you need align-content: flex-start to pull all rows to the top.

html,
body {
  margin: 0;
  width: 100%;
  min-height: 100vh;
}

#root {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: flex-start;
  width: 100%;
  height: 100%;
}

<main id="root"></main>
<script src="https://openbox.city/js/nested_js.js"></script>
<script src="https://openbox.city/js/tranzit_js.js"></script>
<script type="text/javascript">
  Nested = new nested()
  Tranzit = new tranzit()

  const root = document.querySelector('#root')

  const gridZoom = {
    gridWidth: 7,
    gridHeight: 10,
    initialize() {
      this.createGrid()
    },
    createGrid() {

      const cellDimension = root.getBoundingClientRect().width / this.gridWidth
      const cell = this.library.cell(cellDimension)
      const amountOfCells = this.gridWidth * this.gridHeight
      for (i = 0; i < amountOfCells; i  ) {
        const cellClone = cell.cloneNode(true)
        cellClone.dataset.id = i
        root.appendChild(cellClone)
      }
    },
    library: {
      cell(dimension) {
        return Nested.parse({
          tag: 'div',
          attributes: {
            class: 'grid_cell',
            style: {
              boxSizing: 'border-box',
              display: 'inline-block',
              background: 'blue',
              border: '1px solid black',
              width: `${dimension}px`,
              height: `${dimension}px`,
              flexGrow: 0,
              flexShrink: 0
            }
          }
        })
      }
    }
  }

  gridZoom.initialize()
</script>

CodePudding user response：

row-gap css property needs to be set to 0.