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.
Card sizes based on container instead of content resulting in wrong height
See original GitHub issueEnvironment
Android preview app. Not an issue on react-native-web.
Description
If a Card is inside a container that has styles of: { flex: 1, alignItems: 'center', justifyContent: 'center', padding: 30 } it doesn’t size based on it’s content but based on the container.
Reproducible Demo
See this snack. Note how the web version shows expected behaviour but the android one does not.
Issue Analytics
- State:
- Created 3 years ago
- Reactions:2
- Comments:8 (2 by maintainers)
Top Results From Across the Web
How to get images in Bootstrap's card to be the same height ...
I would like for the images to all be the same size without having to manually resize the images. The responsiveness does work,...
Read more >Managing different sized contents in a card
This will make all Cards equal to the card with the greatest height. Then you can make sure all of the “mapped” buttons...
Read more >CSS- Div- Be Careful When You Size Your Divs
It makes sense: both DIVs and tables can be nested, have HEIGHT and WIDTH ... If one DIV displays larger than you expect,...
Read more >Overflowing content - Learn web development | MDN
This box has a height and a width. This means that if there is too much content to be displayed within the assigned...
Read more >Preventing a Grid Blowout | CSS-Tricks
Grid then looks at the min-content size of the item. If the item has a size (you've given it a width) or has...
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 Free
Top 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
As you can see in this updated snack running 3.8 the issue persists.
The problem is not the
flexShrinkbut theflexGrow. There is no need for the inner container to grow since the parents are the size of their children.As I suggest in my previous comment I think adding
flexGrow: 0would solve the issue.Closing via: #3469