Flex vs Grid Challenge
I am trying to get a deper understanding of flexbox, but I can’t seem to get my head around this situation. How to modify the text wrapper while still keeping its display in flex to have its height defined by its children?
I would like to know how someone with deep understanding of flex box would solve this so I understand it better. Watched many of Kevin's tutorials and read about it which helped a lot, but in practice, there are still some tiny details that slip my mind.
https://skala.instawp.xyz/flex-vs-grid/
4 Replies
This is really difficult to diagnose because you're loading over 10k lines of CSS, plus a bunch of JS which modifies styles, and the problem you describe doesn't apply consistently across viewport sizes. This could be a problem with some aspect of the wordpress code editor you're using, or the theme. Can you replicate the problem in its simplest form in a codepen?
@Alex thanks for the tip! I was thinking Iam doing something wrong, but it seems it is some auatomated setting that I am having hard time of pinpointing it.
When I recreated it in codepen, the issue is not there: https://codepen.io/petarpavlov/pen/mdZWEjX
There is one other question, though now that I prepared it. You will notice in the code a commented line for min-width of the media-wrapper. Is it possible to define that the media-wrapper (or the illustration) to be 100% high and the width to be automatically assigned? In my current setup it defaults to 0 width unless I specify a hardcoded width.
I'm afraid I don't know enough about SVG to answer this fully, but I can say that without some element with an intrinsic size set on it, I don't think the parent will scale appropriately. You could try an aspect-ratio on the media-wrapper
I manged to solve the svg, but now the intiial problem was reproduced. So the question is how to set the height of the text wrapper which jas display: flex to be the same height as the children together?