How to place several other "sub-elements" on a flex grid element?

Question

css

I am a beginner coder, so such (possibly obvious) questions appear, I would be grateful for an answer or a good resource for solving a similar problem)
I have a task to place cards of some projects with names under them. The problem is that so far it has only been possible to make the text look adequate only in the center of the card, but not below it. Also, there is a problem that if the text is too long, then it wraps to the next line as a new grid item. It looks like this:

Here is the code itself:
HTML

<ul class="flex-container">
              <?php foreach($projects as $key): ?>
              <?php $url = 'project.php?=' . http_build_query(['id' => $key['id'] ]); ?>
              <li class="flex-item" style="<?= $key['image']; ?>"><a href="<?= $url; ?>" style="font-size: 10px; color:white;"><?= $key['name']; ?></a></li>
              <?php endforeach; ?>
</ul>

css

.flex-container {
  margin-top: 100px;
  padding: 10px;
  margin-left:50%;
  max-width: 1300px;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  padding: 10px;
  font-size: 10px;
  margin: 0 -5px;
  list-style: none;
}

.flex-item {
  padding: 5px;
  width: 250px;
  height: 220px;
  margin-top: 10px;
  padding-top: 12%;
  line-height: 150px;
  color: white;
  font-weight: bold;
  font-size: 10px;
  text-align: center;
}

Thus, the question is how to make the text displayed under the photo normally (in several rows with the same indents) for any text length, i.e. so that the grid adjusts to the text, and not vice versa.

Answer 1

line-height: 150px;

Why do you need this?
Put a normal value, it will be fine.
And it is desirable to indicate line-height as a coefficient, without specifying units of measurement.
https://css-live.ru/css/metriki-shrifta-line-height...
https://learn.javascript.ru/font-size-line-height

so that the grid adjusts to the text, and not vice versa

Don't set the height.