Slick Carousel: slide is not full width inside grid child with dynamic width

Question

I'm lost as to how to make the slick carousel get the correct width.

I have a section which has a dynamic width, meaning that I get the width of another two sections in javascript, I pass the result as a css variable inside the body style tag, and then I use the css calc() to get the difference from these two results to get the width of my blue section

JS

$(window).on('load', function() {
   var leftWidth = $('.left').width();
   var gridWidth = $('.grid').width();
   var headerWidth = $('.header').width();
   
// get the widths of the sections and pass the value as a css variable
   $('body').attr('style', 
                  '--leftWidth: ' +leftWidth+'px; ' +
                  '--gridWidth: ' + gridWidth+'px; ' + 
                  '--headerWidth: ' + headerWidth+ 'px;');
});

CSS

.right {
  width: calc( var(--gridWidth) - var(--headerWidth));
}

The problem is the fact that inside the blue section, I have a slick carousel with only text, which I want to be full width, BUT because (I think) its parent has a dynamic width, slick gets too wide and the text just overflows / stays on one line.

At first I thought it was because the parent has display: grid , I tried the trick of setting grid-template-columns to minmax(0, 1fr) and it worked when the container didn't get a dynamic width from js , which I actually need ...

FIDDLE IS HERE

Answer 1

I was able to get this to work by moving your Slick initialization to occur after setting up the CSS vars.

$(window).on('load', function() {
   var leftWidth = $('.left').width();
   var gridWidth = $('.grid').width();
   var headerWidth = $('.header').width();
   
   $('body').attr('style', '--leftWidth: ' +leftWidth+'px; --gridWidth: ' +gridWidth+'px; --headerWidth: ' +headerWidth+ 'px;');
   
   $('.carousel').slick({
      appendArrows: $('.append')
  });
});

Working example here: https://jsfiddle.net/johxcz5w/

FWIW, your original code worked fine in FF (Mac), which was confusing at first.