flexDirection cause the content too long overlapped another cell

[EeSien]

I was trying to make two tables in the same row and using flexDirection and having the below problem.

is there anyone face this issue before and know the solution?

https://react-pdf.org/repl?code=3187b0760ce02e004d09e01b02984605e18194a4e5600b6592803a6002764043299002806f00a0618023100137802e1859b36001da972e012cc00737e0118003001a56420198a001e004425560502785e008828800ee275405f156ca357629fa318aad85895ca017e27a8015ca0404c95dc84384028b9902870f1fc204111bcc222853862e2018453a3f801c80189d8d4cacb0bed33a3622801d5bd7de5c23ca3b228009425a408a11a7cfc619432d8b2ea008440a042016c079b8632ec331d9d913b2d5d466167a829a4a5fc8243d2da359074f5900c8cc1fdccad975a1c9c50f310002468ebb6dabd06fe00130015800a46748b8ce209170c04cc95497121350e87c0a3012855ca6a2a9b5a114298cc40b3744508ac505152f150da9c41643390bd5175000cb20d4fd2690c46f8ba450002a2061033f80a5b384d8aa35bbc527f4880316265044399637e6c39049149a4d5ed3a99229d8cab55d51d514c0993b027b33916de6d23a4291772c5cf559bd903964220be3f38ab8da7b0391de127509eb83877b8c0417ab5380a05809000bcb596a069a6009b03f5903d3ebf041548954b5eeb6f6fbe54228e86e33b1cd2753e9c533da59ecae2159e05900876b598fd7ce89e4da7e40a65b306c004a003733198a0482c0008a8109269a6c80c0c1e8d38c000f977aa000f36840c040acd90b983db44f00056a349b708143a1186fd4291383c1b1df223604f000d4246402c3817077d3f283bf195907fc7648840b0220afc3f2fc20521e0cd82c442da40260143c0c82f00c360ac3e08f9be310e27c308c224f0152e581d0982f04a23b1f4fd5a2287fc1f730b84080c13c007a663342808f02300b1340f03a486284622d0d83c88e3b08ec521a2ea7a294e5224d62d4f62504e22b6e274ba20f015e0611903130cc53f4b9350a729495348e8330cd22b6d3fd3e2dce730ccf3907534c9f3de0b3fcfe2e2230b807258c0b18d13e48b092d935290ac2b82b49e374f4b18e0ad8ef2a8a8b78fe228091807b3c4c4a90d9252d73eaa031a85264a0332e2a2888a364b0f4f733ae324adcbfaa0a58aca4c9cbccdf5ff4e868030005a07db4000c412c920ae535ab4b9ae5306b2326b336544146f728aa1bbad2a6683c006675aa4dda5ad4b368eb5089b86df24e803f4a03ce83a3ec8baea0414390004e05a1420416e066005a6060781886a1b07ee97a88edbbe81adeaea34aa25253a18a63c69c7c2ababe905001a825471ef479edda5c853e9fdabccbb3d5c209e4399d0b0e9ea3e0e764bfa59dc6b8eba0041301a6220281811e6a7daadae9f975e92249a9b8efe790c17b9806bd6e3bb191ff1c9a8610005ba81024404018000497e0d76dca00a1686a060588604405da5d24600240019ec0181e018190000ace21f67dab762441b36a16610192180086f1a8441a42b7b4521e5b5c2410eb7577b70f66000165a830180021a83967e86676a5688ae7b2a3abd7c731b1b24f7b59e9abee06c188641686273861185021801d8169476a8da69daedbc631b9e6f1afa69dfb898bb85eefff504a9e9e1efaee7fa631a5264b9e64f6a3cd579bfe72f8df49b66fab476fffabbe3b2c80b57a22b5a6f79b2bf2813b8309280d5d9cb1f03e8bc75b5168a68cd78772bebfd7d3bf7fc364ec880f726026b840d7e2dcf29594fe44ce05df356bad1074087cb15b81a0c261839c960cde6fda07e0efe4bc45ae080a024aa8d5472b3c6872567af2d9f90b7beeb1d993f3a1c23d58c0afeebc5fbd09215f4e6b5045acb4d69ef27ebc309b88e217cca4410a32b22247c8ffc774d44f0c56983b1910e6e3a3ebac0fd1423b47716de20dc1a4341eb0de1a4351e6e2a7b7083e18dc0658831da35b9309910e3ac53883c94ca85f0a6a022346732091127aa88d9e5a3ac684db1d2308704c8962c25af838832d2c2c486ae6368724ed6d8274584dc9292c9a1b63666c2d95b5b6301ed8c0476cec0bbbb4f6e01bd9fb00e41d43b872aa4600b8c735071c1395b64e5c153ba718099db3bae3ce7417a51752ee5d2b994e42892329549fecbdff364bd19dce46766717dc1400f186c3cbc78f49ea0cf642b57281255958de65927e9d88b9862ae41e1deaf29ebc4f4174c18a9f009fb29f0be6fa625cf25e6bcb79981ce05c8a20c0a8d20540c01d47a027873a6e0d9a240f1ce20000

As you can see the highlighted content reached to another cell

[mikey0000]

Yes I have a lot of issues with flex properties in react-pdf, been trying to solve them but it has been slow going. try adding flex-grow: 1 if you take computedStyles of a normal element with flex: 0 and apply them to react-pdf it doesn't render it correctly.

[EeSien]

After trying for few days, i found out that you can use margin left to make your data to the right side. Whoever faced this issue can give a try. Hope it helps at the moment before the bug is fixed

[Pabliomen]

@EeSien got into the same problem, using your example and adding a flex: 1 to the table fixes is. https://react-pdf.org/repl?code=3187b0760ce02e004d09e01b02984605e18194a4e5600b6592803a6002764043299002806f00a0618023100137802e1859b36001da972e012cc00737e0118003001a56420198a001e004425560502785e008828800ee275405f156ca357629fa0f55be7da1162572805f84da8015ca0404c946154d93828b9902870f1022041117c22a2843840e2120184d373f801c80189d8d52b2a4abc6373e22801d57dfd3cb285631a009425a408a05afc0261943beaf228008440a0c2016c86db463aec3b1d9d91bb2d5dc661e7a829a4a50242c333a260359074f5900c8cc103ccad57235436510b100024691b76971f30d020026002b001482ed92e824922e1809952e92e0c33a0d0291428a50a955f1b54b9c3a6b305b7d8a3072829a984d86639aad119c9de74c980065906a41a33f863227d2002a206112c460a5b244d81f2717cd280ecb039626087425918c9823902934864d51346b927194bc754d4b4f563545ed7e7b339dc9068cf5394990a453c9584bd632e43e590885fbfc12ae4b81c8e272459dc24ed0f1c9e307053ad4e02816024002f2d4c0e4a0ba95d934d641f406fc707533d5ecdafbfdf2a10c7c309bd926c029f4e67146f69656fd883678164023d9d6e30dcb9365b19f902956cc1b0012800dccc6628120b00022b04249a59b2030307a2ce30003e7dea8003cda1030182f3643368f9733c0015a8d25dc2050e84607f50a44e0f06c07db2360cf000d4246402c381704fdbf1837f4f990402f66c8c0882a09fcbf1fc2052110ed82c6432e6026034320e82f02c3e09c310ef8fe3101242388e22cf0146e58130b82f06a3bd2ac037a2284029f730b86080c33c007a563342804f22380893c0c8364a628452230f8328ae3709e2d23a31a46254d52a4f6234ce2506e2bb7f4f48628f015e0611900938ce530c853d097254b53c8d83b0ed32b5d3030123cd738cef3904d3ccbf2be6edaca0a9f0488c2e09cb6382e63c4c522c54be48cac288a109d2f8fd2b2e63428e37c9a262c0b048a0246011cc9252943e4f4bdca6a4096a94b92409cacaaa2a2ad92c0333c9eb4cf2a0aa1a42b6372b33f2cb310403ba1a00c001689f6d0003164ba4e2b548eb32b6b5491a2899a2cd95e69db50d2b46bea2aff50080198b69920ef6a328ba48a3a7c9bbc6a030c902aee3ac6b9b00d0414390004e65a1450596d066065a6050741a86618869ef7adcceafeaf37aad268b4826cf201afaf19e3bb403c14006a09d197a48bda76cc7f6aea3ef43a6a06507c309ecb59dc722fc7ceda7fea9b79d9ba2bba8f00104c0598880a06017869e675ed6a95966c89174e9f409f7a85e92d9efae6dec64403f26a1840016ea0609101006000125f80dd77280285a1a8181e21811077657491800900067b006078060640002b049fdff76df89102b9a879840548600217c6a1106916ded14866637091c39dc3ddddbd98000596a0c0600086a115ec7e9da671ebb49ff3ced577593301836c5f3b41886a1f0561a9c11a4614286007665ad186bb6c6fe9d569baee5bb3ab992b85e6ef9b27c5885a999f9e85e1be671993c98b938fb92bac5e49cdf3655ed5f52979be39c1a31cfbc293bfada2aa9d648e27dff667d2557e2d55b828928075d5ca1f6c66fcf2a6b2fec027f8b175e8fd45a00ab2dfcec8390819e4a06b91811fdf9ac53be9759075f541bc48851e78a355b8360a62c7d1bbe0801f028aa0b5fea43ffb773418546c9095aaf559c9cf37a075cfb0d1e61bd5067357ee22505c0ed66c2905eb0d69fdc991e45ad40569ad4da7bc31ae0b11eac245c8816eddd8528c312a3c5a3d1d142255b409916428c6011318a33b8388b1bdcc1a4368643de1a2368663dbc74f41107cde82f2615c3be310a321c3607b88a6bbd827d761147cf4773031b23fa948c61f633872f2d6c62fe8777d679378a0129632c123cb4b0742d2b24bb1e92dc7f3289453946dd73aa6c2d95b1b6f6d1db04676aed1c3172f63edc01fb40ec1d4384728eb548c31778e6a113b275b669cb80672ce300739e74dc85ce810cd2e15cab8d71a9cd4ea5e09c9b129a6fd6c67fc2e56f0f1fdc1420f38623dfc44f29ee0d8e6a179ef521fa349fa0a26e410bb920ca9a7cddaa736a6b553e90ab1aed17c6f97e8494bcd796f3de6600b8973a88305a3481503008d1e819e7cedb97678923c0b8800

It's a bit cleaner than using the margin