I want to show on my web page a group of pdfs inside a div, in such a way that the width of the displayed pdf is always the same size as the div, In the screen you should only what the pdf has written in it and not the borders or the toolbar. Also I need the user to scroll over the parent div to go through and read all the pdfs, that is, there should only be one scroller and the pdfs should be shown one below the other. I need it this way because afterwards I want to detect when the user scrolls to the bottom of the div, through all pdfs.

I managed to get the number of pages in the pdf with pdf lib, and then set the minHeight to the pages multiplied by some number that will give me the height I need for a carta sized pdf. But this doesn't solve the width problem and also has difficulties when I get other formats in the pdf.

{
   data && data !== [] && !loading
    ? data.map((contract, index) => {
       return (
          <div key={index} 
              style={{ position: 'relative', height: `${contract.pages}px` }} >
              <object 
                  height='100vh' 
                  width='100%' 
                  data={`${contract.url}#toolbar=0`} 
                  type='application/pdf' 
                  frameBorder='0' scrolling='no' 
                  style={{ minHeight: `${contract.pages}px`, overflow: 'hidden', scrolling: 'no' }} 
                 seamless='seamless' />
             </div>
                )
              })
              : <ContractLoader />
  }