I have a SharePoint list with custom column formatting, which works perfectly until the text in another column has too many lines, then vertical centering is not working and the coloring does not cover the entire space.The aim is to have the color in the title column fill the space entirely, as you can see in the green box it works with one or two lines.But then I have items where there is 5 lines of text and the box doesn't cover the entire thing (red)Problem visualisation
Here's the current code that I have. I tried changing flex direction to column, setting height to 100% and some other flex properties, but it's been many years since I've worked with CSS and simply don't remember what the solution here should be.
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json","elmType": "div","style": {"box-sizing": "border-box","padding": "0 2px","overflow": "hidden","text-overflow": "ellipsis","display": "flex","width": "100%","height": "100%","align-items": "center" },"attributes": {"class": "sp-css-backgroundColor-BgViolet sp-field-borderLeftRegular sp-field-borderLeftSolid sp-css-borderColor-LightGrayFont sp-field-fontSizeMedium sp-css-color-LightGrayFont sp-field-bold" },"txtContent": "[$Title]"
