0

I have a Page component in my React application with the size of A4 page. Inside this Page component I have multiple different nested children. However I came across a problem.

Problem lays when children of one Page component overflow it's height. How can I create another instance of Page component and move children that are overflowing to that component. Also, if possible, for solution to be recursive because n Page component can also have children that are overflowing it's height.

I tried multiple different solutions but all of them were either ineffective or full of bugs.

I have a page component:

const Page = ({ children }) => {
    return <div style={{ width: A4.width, height: A4.height }}> {children} </div>
}

And this is in some particular container:

const Container = () => {
    return (
        <Page>
            <div className="child" />
            <div className="child" />
    
            {/* This should be moved into another Page instance programmatically */}
            <div className="child" />
        </Page>
    }
}

And this is my CSS:

.child {
    position: relative;
    width: 100%;
    height: 50%;
    border: 2px solid black;
}

NOTE: This question does not refer and is not identical as this one: How to make a HTML Page in A4 paper size page(s)? I need a way to dynamically create containers and append children from previous containers that are overflowing the height of said previous containers.

Sergej Zivkovic
  • 101
  • 8
  • Does this answer your question? [How to make a HTML Page in A4 paper size page(s)?](https://stackoverflow.com/questions/3341485/how-to-make-a-html-page-in-a4-paper-size-pages) – Ruud Helderman Jan 07 '23 at 16:09
  • After further inspection, not really. I need a way to recursively move children that overflow container into another container that is dynamically created based on that logic. – Sergej Zivkovic Jan 07 '23 at 16:15
  • Do you already have the overflowing detection, or do you also need help on that? (Might need a separate question if so) – ghybs Jan 07 '23 at 18:21
  • Yeah I have overflowing detection. Basically I take height in px of the page element and compare it against bounding box of all child elements. – Sergej Zivkovic Jan 07 '23 at 18:25

0 Answers0