Display issue on React components. Unexpected sizes when using flexbox

Issue

I am starting a simple testing app using NextJS/React.

Below is the code:

The Board.tsx file content:

import './Board.css';

export default function Board() {
    return <div className="board">
    <Row/>
    <Row/>
    <Row/>
  </div>
} /* End of Board */

function Row() {
    return <div className="row">
    <Cell/>
    <Cell/>
    <Cell/>
  </div>
} /* End of Row */

function Cell() {
    return <div className="cell"/>
} /* End of Cell */

And the Board.css file content:

.cell {
  width: 3rem;
  height: 3rem;
  background-color: rgb(255, 255, 0);
  border-width: 2px;
  border-color: rgb(55, 55, 55);
  margin: 11%;
}

.row {
  display: flex;
  flex-direction: row;
}

.board {
  display: flex;
  flex-direction: column;
}

At the top is the app/page.tsx file:

import Image from 'next/image'
import Board from './components/Board'

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      X4C APP
      <Board/>
    </main>
  )
}

Here is what appears in the web browser when running the app:

Finally I have a question. Why don't we see perfect yellow squares, when the css states a fixed width and height for the cell component?

I can see by experimenting that, if I remove the two blocks

.row {...}
.board {...}

from the Board.css file, I get perfect squares.

So what is causing this issue in those two blocks?

Solution

It is because you are giving margin in percentage here (margin: 11%;) to the Cell. if you change it to some absolute value like 10px / 10rem, you will see perfect squares.

Since, the default value of flex-shrink for your cells is 1, your cells will try to shrink if it does not have enough space. Giving a margin in % will then eat into your Cell's available space and hence Cell will then shrink.

If you want to still keep margin in %, you can set flex-shrink: 0; to your Cell, which will prevent your Cells from shrinking

Answered By - ALTHAF PJALEEL