We have a grid layout container that we are filling with symbols, whose uppermost container has a height of 100% in order for all the symbols to be of the height of the tallest symbol in the grid.
The problem is that symbols do not seem to expand to the height of the non-symbol container when they are imported. From what I understand, when imported, symbols get wrapped in more containers automatically, that do not have the styling.
Is styling propagation something that could exist in the future for symbols?
What would be the best solution now, except to fix symbol height as we would like them to be flexible?
You can try making the symbols items as display: flex and add flex: 1; property to them so that they can take the full available height. If that doesn’t work then do let us know, and we will try and implement that from our end. Thank you1
@manish-sharma As mentioned, I have set the non-symbol container to display: flex and flex-direction: row with symbol child to display: flex and flex: 1.
The result is as in the image I shared above, the outline shows symbols as being full height, but the content remains the same.