Flex-Basis breaks on wrap
See original GitHub issueReact-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)
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:
- Created 5 years ago
- Reactions:1
- Comments:6 (1 by maintainers)
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
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!
Thanks! Could you provide also the jsx so I can test it?