horizontal scroll with 100% width on grid cell - html

Question

I want to have a css grid, inside each cell of the grid, I want a title with a maximum size of 100% of the width of the cell. If title is too long, i want to scroll.
This is how it looks currently with the correct scrolling behavior but with a fixed width on the long title. Instead of a fixed width, i want a width of 100% of the cell width (so the grey block should be as long as red box)
codePen: https://codepen.io/vincent2303/pen/ExwZEpW
* {
margin: 0;
padding: 0;
}
body {
padding: 50px;
}
h2 {
font-size: 2em;
white-space: nowrap;
}
.grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
width: 800px;
gap: 20px;
}
.box {
background-color: #e74c3c;
height: 30vh;
}
.title-wrapper {
background-color: #bdc3c7;
width: 300px;
overflow-x: scroll;
}
<div class=grid>
<div>
<div class="title-wrapper">
<h2>long title, i can scroll---------</h2>
</div>
<div class="box"></div>
</div>
<div>
<h2>Short title</h2>
<div class="box"></div>
</div>
</div>
Does anyone have an idea to do that ?
NOTE: To make the code example simple, the .grid class has a width of 800px but in reality, it's width is defined by its parent on which i can not predict the width (i'm working on a react app and this code will implement a component used in multiple places with different sizes).

Answer 1

If your grid potentially contains overflowing content, you cannot work with 1fr, here's why:
1fr is just short for minmax(auto, 1fr).
minmax(a, b) becomes a (without any minmax) when a >= b is true.
So in your case your grid behaves as if you had defined it as grid-template-columns: auto 1fr;, because auto is larger than 1fr for your first column.
To fix that, you need to tell your grid that it isn't allowed to extend the cells when content becomes too wide.
Use minmax(0, 1fr) instead of 1fr:
* {
margin: 0;
padding: 0;
}
body {
padding: 50px;
}
h2 {
font-size: 2em;
white-space: nowrap;
}
.grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
width: 800px;
gap: 20px;
}
.box {
background-color: #e74c3c;
height: 30vh;
}
h2 {
background-color: #bdc3c7;
overflow-x: scroll;
}
<div class=grid>
<div>
<h2>long title, i can scroll------------------ - - - - ----</h2>
<div class="box"></div>
</div>
<div>
<h2>Short title</h2>
<div class="box"></div>
</div>
</div>

Answer 2

As commented heres a possibility:
* {
margin: 0;
padding: 0;
}
body {
padding: 50px;
}
h2 {
font-size: 2em;
white-space: nowrap;
}
.grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
width: 800px;
gap: 20px;
}
.box {
background-color: #e74c3c;
height: 50vh;
max-width: 400px;
}
.title-wrapper {
background-color: #bdc3c7;
width: 100%;
overflow-x: scroll;
}
<div class=grid >
<div>
<div class="box" >
<div class="title-wrapper" >
<h2>long title, i can scroll---------------------------------</h2>
</div>
</div>
</div>
<div>
<div class="box" >
<h2>Short title</h2>
</div>
</div>
</div>

Answer 3

Seems to be hard without JavaScript, Dev his answers works, but it involves a fixed max-width.
I've got a solution with JavaScript that seems to work.
/* Execute when the DOM is loaded, because otherwise the HTML elements might nog be in the DOM. */
window.addEventListener( 'DOMContentLoaded', () => {
generateGridItemsWidthVariable()
} )
/* Execute when the window is resized, because the width of the boxes might change. */
window.addEventListener( 'resize', () => {
generateGridItemsWidthVariable()
} )
/* Generate the variable for the grid items. */
function generateGridItemsWidthVariable() {
/* Select all the grid items and create an array to loop trough. */
let gridItems = Array.from( document.getElementsByClassName( 'grid__item' ) )
/* Loop trough the grid items. */
gridItems.forEach( gridItem => {
/* Reset the grid item width, because otherwise the item won't resize. */
gridItem.style.setProperty( '--grid-item--width', '' )
/* Get the width of the grid item. */
let gridItemWidth = gridItem.clientWidth.toString()
/* Set the width of the grid item as a CSS variable. */
gridItem.style.setProperty( '--grid-item--width', gridItemWidth + 'px' )
} )
}
* {
margin: 0;
padding: 0;
}
body {
padding: 50px;
}
h2 {
font-size: 2em;
white-space: nowrap;
}
.grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
width: 100%;
max-width: 800px;
gap: 20px;
}
.grid__item {
--grid-item--width: 10px;
}
.box {
background-color: #e74c3c;
height: 30vh;
}
.title-wrapper {
background-color: #bdc3c7;
width: 100%;
}
.title-wrapper h2 {
max-width: var(--grid-item--width);
overflow-x: scroll;
}
<div class=grid >
<div class="grid__item">
<div class="title-wrapper" >
<h2>long title, i can scroll-----------------------</h2>
</div>
<div class="box" ></div>
</div>
<div class="grid__item">
<h2>Short title</h2>
<div class="box" ></div>
</div>
</div>

Answer 4

Well 1fr resolves to minmax(auto, 1fr) and this means that the minimum width of the grid column is min-content, that is more then 1fr. There is a quick solution to this issue just replacing 1fr by minmax(0px, 1fr), by this, parent's width is devided between 2 columns, and this way you have the scroll bar as you wish.
* {
margin: 0;
padding: 0;
}
body {
padding: 50px;
}
h2 {
font-size: 2em;
white-space: nowrap;
}
.grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
}
.box {
background-color: #e74c3c;
height: 30vh;
}
h2 {
background-color: #bdc3c7;
overflow-x: auto;
}
<div class=grid>
<div>
<h2>long title, i can scroll----------------------------</h2>
<div class="box"></div>
</div>
<div>
<h2>Short title</h2>
<div class="box"></div>
</div>
</div>