The way css calculates the height of an element, % only works as a unit if the element’s direct parent has a defined height. In this case the direct parent of the three rows is the f7-card-content:
- component: f7-card-content
slots:
default:
...
With no height styling it is just fitting its height to its content and this creates a loop if you try to use percent because the child asks the parent “what’s your height, I want to be 1/10th of that.” and the parent responds “I won’t know my height until I know your height.” Fixing this is easy, you just have to set the card content height explicitly, and presumably you want it to fill the card, so:
- component: f7-card-content
config:
style:
height: 100%
slots:
default:
...
In this case, the f7-col are extraneous and adding some margin and padding you don’t want. You can just get rid of them and have the buttons as direct children of the f7-row.
You can solve the first two of these issues (and probably also the third) by just using an oh-link instead of an oh-button. The oh-button comes with a lot of built-in style settings and these are interfering with what you want to do. Yon don’t even need to change any of the other properties, just change oh-button to oh-link and you should get what you’re looking for.