React: content not fulfilling 100vh between aspect ratio - css

Question

I need this to fill the screen with no scroll bar
#media (min-aspect-ratio: 2/3) and (max-aspect-ratio: 3/2) {
.containerMedia {
columns: 3 auto;
}
.individualBoxMedia{
height: calc(100vh/3);
}
but its like this
but this is working
#media (max-aspect-ratio: 2/3) {
.containerMedia {
columns: 2 auto;
}
.individualBoxMedia{
height: 25vh;
}
}
full code
App.js
//import logo from './images/logo512.png';
import './App.css';
import cardData from './data/cardData';
function App() {
return (
<div className="App">
<div className='container containerMedia'>
{cardData.map(card => {
return (
<div className='individualBox individualBoxMedia'>
<div className='card'>
<div className='cardImageBox'>
<img src={card.location}/>
</div>
<div className='cardTextBox'>
<p>{card.text}</p>
</div>
</div>
</div>
)
})}
</div>
</div>
);
}
export default App;
/*
https://codesandbox.io/s/repeat-element-dpocp?file=/src/App.tsx
*/
app.css
.App {
text-align: center;
}
#media (max-aspect-ratio: 2/3) {
.containerMedia {
columns: 2 auto;
}
.individualBoxMedia{
height: 25vh;
}
}
#media (min-aspect-ratio: 2/3) and (max-aspect-ratio: 3/2) {
.containerMedia {
columns: 3 auto;
}
.individualBoxMedia{
height: calc(100vh/3);
}
}
#media (min-aspect-ratio: 3/2) {
.containerMedia {
columns: 4 auto;
}
.individualBoxMedia{
height: 50vh;
}
}
.individualBox {
border-style: solid;
border-width: 0em;
box-sizing: border-box;
padding: 1vw;
background-color: lightgray;
}
.card{
box-sizing: border-box;
height: 100%;
width: 100%;
padding: 0.5vw;
background-color: white;
border-radius: 0.5em;
}
.cardImageBox{
box-sizing: border-box;
height: 60%;
width: 100%;
}
.cardTextBox {
box-sizing: border-box;
min-height: 0;
min-height: 40%;
max-height: 40%;
width: 100%;
overflow: hidden;
}
.container {
column-gap: 0rem;
max-height: 100vh;
max-width: 100vw;
}
.individualBox img {
width: 100%;
height: 100%;
object-fit: cover;
object-position:top;
border-radius: 0.5em 0.5em 0px 0px;
}
.individualBox p {
padding: 0;
margin: 0;
overflow: hidden;
}
data
//Card Data
export default [
{
text: 'The final Computer Space design uses no microprocessor; the entire computer system is a state machine made of 7400-series integrated circuits, with monochrome graphic elements held in diode arrays.',
location: './images/object1.jpg',
},
{
text: 'object2 rtxyculvy fvgbhjn fcvgbhjn vybhnj ytbjhk xdcfvgbjh ctryvb crtfyvgbh',
location: './images/object2.jpg',
},
{
text: 'object3 cytvub tcvb tcfvyg trcvyb trcyvub yvtub yvtuby vytub vtuyb vtgubh vuybi',
location: './images/object3.jpg',
},
{
text: 'object4 tdrfygu ctryvbuu rtcyvbuni rtyvbu ed5rftyguhijo rextcvyb rtcyguhi rftyguhi',
location: './images/object4.jpg',
},
{
text: 'object5 cvgb ytvubiu rytui rytguhi rtfyguhijo rtfyguhijo zwxretcfyvguhio drftyg',
location: './images/object5.jpg',
},
{
text: 'object6 yvubyhinj ctryvuy rctyvub yrctvubiu rctyfugi f7tygiu rctvyubiu rftyguih',
location: './images/object6.jpg',
},
{
text: 'object7 cfvgbjhkn cfvygtbyhn rxectfvygbuni rtcvybun rctyvbuin rtyvub etcrvytgbu',
location: './images/object7.jpg',
},
{
text: 'object8 cvbyn rcytvubu trcyvubu rfytgui ytugi yrtvubi ytvubi yrctui ytui rfytugih',
location: './images/object8.jpg',
}
];

Answer 1

I would suggest using something like this
.parent {
display: grid;
grid-template-columns: (auto, minmax(250px, 300px))
}