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
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.