How to dynamically add a changeable size canvass to pdf?

I am using Html2Canvas and jsPDF to create a canvass from a hidden div content, the core issue here is when I want to mount the canvass on the pdf,

what I am considering is, the items div could have 1 item and could have 1000, what I want to implement is the more items the smaller the items get on the canvass so they will always fit no matter how big or how small, any idea how to solve this? , another case here is how to create another pdf page if items don’t fit on a single page in case my previous question is impossible to implement.

const html2canvasfn = () => {
    html2canvas(
      document.getElementById('clone')!,
      {
        onclone: function (clonedDoc) {
          clonedDoc.getElementById('clone')!.style.display = 'flex';
        },
      }

    ).then((canvas) => {
      document.getElementById('clone')!.style.display = 'none';
      
      const imgData = canvas.toDataURL('image/png');
      // A4 size
      var doc = new jsPDF('p', 'mm', 'a4');
      
      var width = doc.internal.pageSize.getWidth();
      var height = doc.internal.pageSize.getHeight();
      let w = document.querySelector('#clone')!.scrollWidth;
      let h = document.querySelector('#clone')!.scrollHeight;
      
      doc.addImage(imgData, 'PNG', 30, 0, /*w!*/ /*1500 / 10*/ w! /*width*/ /*w!*/, /*height*/ /*h!*/ h!);
      doc.save('doc.pdf');
  
    });
  };

return (
<div style={{ textAlign: 'center' }}>
<Container id='clone' style={{ display: 'none', flexDirection: 'column', justifyContent:                'center', textAlign: 'center', minWidth: 900 }}>
{Object.entries(groupItems(context.exercises[mContext.modal.id])).map(([groupName, items]:             Mapped, i) => (
<div>
<ul>
{i + 1}
{Icons[groupName]}
{groupName}
</ul>
{items.map((el) => (
<li
el.text
/>
))}

</div>
))}
</Container>
</div>
  );
};