PDF scale not working properly in a overflow-auto div

[swang274]

trying to make the pdf work inside my pdf contain, but the overflow and scale won't work.

1. When scale up greater than the container size, the left side of pdf won't show.
2. The container should fill up the screen, but when the pdf finish loading the container overflow-auto doesn't work, it will grow into the page. tried with bootstrap 5 flex, and grid, got the same result.

<div className="container h-100">
    <div className="row">
        {/* nav bar */}
        <div className="pdf_nav_container col bg-dark mx-5 px-3">
            <div className="d-flex gap-2">
                <Button size="sm" onClick={() => handlePageChange(pageNumber - 1)}>
                    <FontAwesomeIcon icon={faChevronUp} />
                </Button>
                <input
                    type="text"
                    className="m-auto"
                    value={pageNumber}
                    style={{ width: '25px', height: '25px' }}
                    onChange={(e) => handlePageChange(parseInt(e.target.value))}
                />
                <span className="text-white">
                    <FontAwesomeIcon icon={faSlash} rotation={90} />
                </span>
                <span className="text-white" style={{ fontSize: '16px' }}>
                    {numPages}
                </span>
                <Button size="sm" onClick={() => handlePageChange(pageNumber + 1)}>
                    <FontAwesomeIcon icon={faChevronDown} />
                </Button>
                <Button size="sm">
                    <FontAwesomeIcon
                        icon={faMagnifyingGlassPlus}
                        onClick={() => {
                            handleScaleChange(pageScale + 0.2);
                        }}
                    />
                </Button>
                <Button size="sm">
                    <FontAwesomeIcon
                        icon={faMagnifyingGlassMinus}
                        onClick={() => {
                            handleScaleChange(pageScale - 0.2);
                        }}
                    />
                </Button>
            </div>

            {/* sig btns */}
            <div className="d-flex ms-auto gap-2 align-items-center">
                <OverlayTrigger
                    placement="top"
                    overlay={
                        <Tooltip id="set_coords_tooltip">
                            To move boxes: hover over the coordinate box to see the cursor change to move
                            icon.
                            <br></br>To resize boxes: click four corners of the box to resize it.
                        </Tooltip>
                    }
                >
                    <FontAwesomeIcon icon={faCircleInfo} style={{ color: '#ffffff' }} />
                </OverlayTrigger>
                <DropdownButton
                    size="sm"
                    align="start"
                    menuVariant="dark"
                    id="btn_set_coords"
                    title="Set Coordinates"
                >
                    {sigBtns.map((sig, i) => {
                        return (
                            <Dropdown.Item key={i} className="signature_stamp" data-stamp={sig.data_stamp}>
                                {sig.label}
                            </Dropdown.Item>
                        );
                    })}
                </DropdownButton>

                <OverlayTrigger
                    placement="top"
                    overlay={
                        <Tooltip id="btn_copy_previous_tooltip">
                            copy coordinates from previous page.
                        </Tooltip>
                    }
                >
                    <Button id="btn_copy_previous_stampers" size="sm">
                        <FontAwesomeIcon icon={faClone} />
                    </Button>
                </OverlayTrigger>
            </div>
        </div>
    </div>

    <div className="row">
        {/* pdf viewer */}
        <div className="col d-flex h-100 justify-content-center overflow-auto">
            <div style={{ height: `${pdfInfo?.displayHeight}px`, width: `${pdfInfo?.displayWidth}px` }}>
                <Document className="" file={url} onLoadSuccess={onDocumentLoadSuccess}>
                    <Page
                        className=""
                        key={pageNumber}
                        scale={2}
                        pageNumber={pageNumber}
                        renderAnnotationLayer={false}
                        renderTextLayer={false}
                        onLoadSuccess={onPageLoadSuccess}
                        // onRenderError={() => setLoading(false)}
                        // width={Math.max(pageWidth * 0.6, 390)}
                    />
                </Document>
            </div>
        </div>
    </div>
</div>

[lukecivantos]

This is happening to me as well