question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Flex-Basis breaks on wrap

See original GitHub issue

React-pdf version: 1.0.0 Description: flex and flex-basis totally crash when they are in a component that page wraps. When wrap=true, .When it wraps, the first part of the View contents get compressed together. as seen in this picture. (the portion of the component on the next page is ok and looks fine)

image this css breaks:

tabelHeader: {
        flex: 1,
        margin: 4,
        flexDirection: "row",
},
column: {
        order: 1,
        flexBasis: "20%",
}

but this CSS works fine with page wrapping:

tabelHeader: {
        //flex: 1,
        margin: 4,
        flexDirection: "row",
},
column: {
        order: 1,
        //flexBasis: "20%",
       width: "20%",
}

NOTE: both styles work fine when the component does not have to page wrap.

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:1
  • Comments:6 (1 by maintainers)

github_iconTop GitHub Comments

1reaction
SharudAgarwalcommented, Sep 24, 2020

Any progress on this issue? Changing wrap=false to wrap=true fixes the issue, but I would like to be able to utilize wrap=false. Thanks!

1reaction
diegomuracommented, Dec 12, 2018

Thanks! Could you provide also the jsx so I can test it?

Read more comments on GitHub >

github_iconTop Results From Across the Web

Flexbox: flex-basis: 100%; does not make a line break
I've tried flex-basis: 100% and width: 100%. That did not help. I also gave the html and body element a width of 100%....
Read more >
Mastering wrapping of flex items - CSS: Cascading Style Sheets
In the next example I have ten items all with a flex-basis of 160px and the ability to grow and shrink. Once the...
Read more >
Breaking to a new row with flexbox | Tobias Ahlin
You can break to a new flexbox row or column without setting the size of an item: add a collapsed flex item between...
Read more >
CSS flex-basis property - W3Schools
Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python,...
Read more >
Flex Wrap - Tailwind CSS
Don't wrap. Use flex-nowrap to prevent flex items from wrapping, causing inflexible items to overflow the container if necessary:.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found