JSFiddle - React, Tailwind, and code Playground

by Tomek

HTML

<div id="largeFrac" class="grid">
    <div>0</div>
    <div>1</div>
</div>
Grid column size was not increased, as min-content of first cell is bigger that 1fr, even though we used minmax(min-content,1fr).

CSS

#largeFrac {
    grid-template-columns: minmax(min-content,1fr) minmax(min-content,1fr);
}
#largeFrac>* {
}
.grid {
    grid-template-rows: 1em;
    display: grid;
    border:1px solid black;
    width: 250px
}
.grid :first-child {
    background-color: rgba(255,0,0,0.5);
    grid-column: 1 ;
    grid-row: 1;
    width: 200px;
}
.grid>:nth-child(2) {
    background-color: rgba(0,255,0,0.5);
    grid-column:2;
    grid-row: 1;
}