CSS implémente des boutons horizontaux sans autres techniques-Questions et réponses sur le réseau chinois PHP

J'essaie de créer deux boutons horizontaux de même largeur, en fonction de la largeur du bouton le plus long.

Le contenu du texte de chaque bouton peut être ajusté par l'utilisateur sur une page séparée... je n'ai donc aucun contrôle sur la longueur du texte/la longueur du texte du premier bouton et du deuxième bouton. ≪/li>
Je souhaite que le bouton s'adapte à la longueur du texte le plus long, mais ne dépasse pas la largeur de la page (comme sur les appareils mobiles). ≪/li>
Je souhaite que les boutons apparaissent horizontalement par défaut, mais s'ils n'apparaissent pas horizontalement, empilés sous forme de colonnes. ≪/li>
J'ai besoin que le texte du bouton soit renvoyé à la ligne si tout le texte ne rentre pas. ≪/li>

 Oui
 Non, désolé, je ne peux pas faire ça

J'ai essayé différentes options... mais je n'arrive pas à le faire fonctionner !

Lorsque j'utilise la disposition en grille grid-template-colums: 1fr 1fr, je ne trouve pas de moyen d'empiler les boutons en colonnes lorsque cela est nécessaire. ≪/li>
Je ne trouve pas de moyen d'adapter la largeur du bouton à la longueur du texte lorsque j'utilise flex et flex:1 1 0. ≪/li>

Aidez-moi s'il vous plaît !

Merci beaucoup ! Damien.

div { background-color: rgba(0, 0, 0, 0.1); } .button-container { padding: 16px; display: flex; gap: 16px; } .horizontal-button { padding: 16px; flex: 1; text-align: center; word-wrap: hypens; } @media (max-width: 360px) { .button-container { flex-direction: column; } }

div { background-color: rgba(0, 0, 0, 0.1); } .button-container { margin: auto; padding: 16px; box-sizing: border-box; display: flex; align-items: stretch; gap: 16px; max-width: max-content; } .horizontal-button { display: flex; flex-direction: column; justify-content: center; padding: 16px; flex: 1; text-align: center; max-width: 50%; } @media (max-width: 360px) { .button-container { flex-direction: column; } .horizontal-button { hyphens: auto; max-width: unset; } }