Making the leaflet layer control panel responsive with javascript

I have too many lines on my leaflet layer control, such that it spills beyond the page. How can I do the below using javascript?

.leaflet-control-layers {
  overflow: auto;
}

What I've tried

1. This answer

   var controls = L.control.layers(null,overlayMaps,{collapsed: false});  
   controls.addTo(map);  
   controls.style.overflow="auto";
   

   I got that the controls didn't have a style attribute

2. The second answer to the same question

   document.getElementById("leaflet-control-layers").style.overflow="auto";
   

   Nothing happens

3. Not sure where I got this, but I guess jQuery wasn't being used in my map

   $(".leaflet-control-layers").style.overflow="auto";
   

   Since this printed ReferenceError: $ is not defined to the console.

4. From the accepted answer to Modify CSS classes using Javascript

       var layercontrols = document.querySelectorAll('.leaflet-control-layers');
       for(var i=0; i<layercontrols.length; i++){
           layercontrols[i].style.overflow="auto";
       }
   

   (nothing happens)