How about something like this?

User:Oot42/Sandbox-2?oldid=3878984

I could always do that, and it is my fall back, but I was looking for specifically the block element solution because sometimes there'll be a lot of white-space where there is no image nor text.

Here's an example of where I hope to apply it to. As you can see by the highlighted part, there's quite a bit of white-space on the second card because the third card's text uses 2 lines. (It's in a flexbox, if that wasn't obvious.)

I was mostly doing all this to see if I could learn about a more "luxury" way of doing it.

Here is a "link".

https://typicalcolors2.fandom.com/wiki/User:TheFlamingX/test_zone/a?oldid=169355

Not sure why this could not be done like in my sandbox example. Just align things to the top?

No this wasn't obvious, and I don't know where and how flexbox is applied. Still missing a link to be able to see and test this with your code.

The cards' content being aligned to the top means that they'd all have white-space on the bottom. (Which isn't a link, and doesn't solve the problem.)

If I were to make the height of cards fit the content, then the cards would be of different sizes, and would ruin the design, in my opinion.

Ok this is way more complex than expected.

So those cards seem to be created by the module, so there is no easy way to test another design of the cards within the navbox.

Still think my solution would be a way to do this, but I'm not going to recreate a module to test this. So I'm just using a simple table as concept:

How is this not what you wanted?

"they'd all have white-space on the bottom. (Which isn't a link, and doesn't solve the problem.)"

Adding this to .imgbtn-caption (using my classes from the sandbox) seems to solve this:

(/edit: causes issues, see next reply)

  display:block;
  height:100%;

This makes the whole box act like a link.

FYI, all I did for my screenshot above was wrapping the cards into a container with this css applied:

.card-container {
  padding:15px;
  display:flex;
  flex-wrap:wrap;
  gap:1em;
}

Ok, height:100% causes other issues, but height:50px; seems to work fine.

(I made the whole card container 150px height in my test, so 50px is container height minus image height)

.imgbtn-container {
  width: 100px;
  height:150px;
}

You could also make the card a little wider so the caption doesn't wrap.

110px for the container (with the image at 100px) seems already to solve this.

Card is 110 x 130px in this example:

Sorry for the many answers and edits.

In case it's getting confusing, this is how I tested it on your page (includes two css variants):

User:Oot42/Sandbox-2?oldid=3879056