Div che si allunga in base alla lunghezza del testo dentro

Ho impostato il div così:

.archive-header {
	width: 300px;
	border-radius: 15px;

però il testo interno varia, ma il div rimane lungo uguale. C'è un modo per far allungare automaticamente il div in base alla lunghezza del testo?
Poi i padding li metto io.

[dreadnaut]

Un <div> è di sua natura un elemento "blocco" (display: block; in CSS), e quindi occupa tutta la larghezza disponibile. Se lo fissi come sopra, diventa più piccolo ma resta inflessibile.

Un modo per farlo adattare alla larghezza del suo contenuto è trasformarlo in un elemento "lineare" usando display: inline; oppure display: inline-block;. I due valori funzionano in modo leggermente diverso, e se intuisco correttamente quello che ti serve qua è inline-block ;)

.archive-header {
  border-radius: 15px;
  display: inline-block;
  /* ... */
}

Un <div> è di sua natura un elemento "blocco" (display: block; in CSS), e quindi occupa tutta la larghezza disponibile. Se lo fissi come sopra, diventa più piccolo ma resta inflessibile.

Un modo per farlo adattare alla larghezza del suo contenuto è trasformarlo in un elemento "lineare" usando display: inline; oppure display: inline-block;. I due valori funzionano in modo leggermente diverso, e se intuisco correttamente quello che ti serve qua è inline-block ;)

.archive-header {
  border-radius: 15px;
  display: inline-block;
  /* ... */
}

Funziona questo display: inline-block;

[dreadnaut]

Se vuoi più informazioni su display e display: inline-block;, questa è una buona pagina: https://www.freecodecamp.org/news/th...lock-and-more/