diegomura / diegomura/react-pdf

Text / word wrap not working in flexGrow container

Open
#2,673 7 comments 1 reaction 0 assignees View on GitHub
Dominant language
TypeScript
Stars
16.8k
Forks
1.3k
Avg merge
5h 6m
Merged PRs (30d)
52

Description

**Describe the bug**
Text / word wrap not working in flexGrow container

**To Reproduce**
Snippet [here](https://react-pdf.org/repl?code=3187b0760ce02e00408a057025803c450298c0bc300500943807cf805030c00f0022230080b6198531165d400a02180e659a004f003619b006f61622003a0046200099080beed3a72a00d490600ee31a78a951446398c79230ea3a6aa005430a36fa9020016009df464f18c8de9e867e419e30ee06813eee0830de4891fe897e9e48de5e7e1e3e48612158890869095400f4ceae1a9ad465ba06d50ef586c692c67210484a187635b5cd8db5bc02d5e5740cccacec0400dc64640062e050b2de187c48d018de78121c00663c8c482242005c3000e400f210fa3c224a9700341c10dec017979e5050000e1033994cafb659c8f8d01e14090c059281186508194407707928ca0037002300198ca004d003ea3800d2da001b080001c007510063e40055250e318848006801387800411e6c97efb4b99154b379a8120b0768e06000653318965010c0ad806b28461761c450a82e7b4d3ecc4281a06430c068780bede103e85e1c552bd28561b1ebec30434b800e2d6fd05cb18ece1fc784a250d8f817001300018030eb797430aecd3b894504f17c713880291db34f21e30000d67c6b420c04a003088044206f17c00c40016003b0e3398d8c1468501ca229bcdd6f0006430fb2817cb17f14119ab5d183d6303c4ec619bb9981c74573320009417e6ae0d016ab1600ef054442a1d05832b10c540000)

_You can make use of [react-pdf REPL](https://react-pdf.org/repl) to share the snippet_

**Expected behavior**
The `` component is correctly sized so I expect that its content get correctly wrapped

**Screenshots**
The component with debug activated is the `Text` one, just to show its size is correct.

Notice that text doesn't wrap before the sidebar, that is, at the end of the Text component, but it wraps at the end of the page

![image](https://github.com/diegomura/react-pdf/assets/4471043/8ba564d3-33bd-4818-b5a9-aff315f4216a)

Just playing around, I noticed that if I set a specific width (300 in the example), to the `` component, the content is correctly wrapped:

![image](https://github.com/diegomura/react-pdf/assets/4471043/96b5cfeb-9650-4458-8043-811aed285b0a)

**Desktop (please complete the following information):**

- OS: MacOS
- Browser: chrome
- React-pdf version: 3.3.8

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.