I have a 4x4 Grid component, rendering Tile components. The Tile components render numbers of varying lengths (from 1 to 4 digits).
I want the font size to be adjusted to match the size of the container, without resizing the Tile components. I do not want to change the positions/sizes of the Tile components in any way, simply to make the size of the contained text match the size of the Tile. Any adjustments to the font size resize the Tile divs and its super frustrating.
https://codesandbox.io/s/agitated-kepler-fhjxm?file=/src/App.js
import React from "react"; import styled from "styled-components"; const Grid = styled.div` width: 250px; height: 250px; background-color: pink; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr); `; const Tile = styled.div` margin: 1.5vh 1vw; background-color: white; max-width: 100%; max-height: 100%; text-align: center; display: table-cell; text-align: center; vertical-align: middle; > p { font-size: 3vw; } `; const elements = [...Array(4)].map(() => [...Array(4)]); export default function App() { return ( <div className="App"> <Grid> {elements.map(row => row.map(e => ( <Tile> <p>{0}</p> </Tile> )) )} </Grid> </div> ); } 
