Assurez-vous que tous les divs de la même classe sont dimensionnés selon le plus grand div

Question

J'ai donc quelques divs comme ceci :

<div class="personal-events-list">
    <div class="specific-event black-font">Something</div>
    <div class="specific-event black-font">Something else</div>
    <div class="specific-event black-font">Something more</div>
</div>

Je veux qu'ils aient la même taille (en supposant que la plus grande taille soit logique), comme ceci : https://i.stack.imgur.com/XxgzK.jpg

Actuellement, j'ai quelque chose comme ceci : https://i.stack.imgur.com/TZmKt.jpg

Actuellement, j'ai du CSS avec "width: fit-content" mais cela les rend simplement de tailles différentes. La seule vraie solution que j'ai trouvée est de leur donner tous une taille fixe, comme "largeur : 300 px", mais cela donne à certains des noms les plus grands/plus petits un aspect un peu génial... Y a-t-il un moyen de faire cela pour moi Tu veux quelque chose ?

Merci beaucoup pour votre temps précieux !

Edit 1 : Ajouter du CSS

.specific-event {
  width: fit-content;
  margin-bottom: 10px;
  text-decoration: none;
  color: black;
  padding: 5px 10px;
  background-color: #d1d1d1;
  border-radius: 8px;
}

.specific-event:hover {
  background-color: #9c9c9c;
  color: white;
}

Answer 1

Essayez d'utiliser width: fit-content 添加到 .personal-events-list 而不是 .special-event

Comme ça :

.specific-event {
  margin-bottom: 10px;
  text-decoration: none;
  color: black;
  padding: 5px 10px;
  background-color: #d1d1d1;
  border-radius: 8px;
}

.specific-event:hover {
  background-color: #9c9c9c;
  color: white;
}

.personal-events-list {
  width: fit-content;
}

    
Something
    
Something else
    
Something more