Html 根据内容调整列宽

我正在使用HTML和CSS设计一个简单的网页。我想在我的页面顶部设计一行，它应该有4个按钮——比如说内容“a”、“BB”、“CCC”、“DDDD”。我想创建这4个按钮，使它们的宽度根据内容的长度而不同，即“A”将是小的，但“DDDD”将是一个更大的按钮，因为它有4个字母，而不是1个

---

我可以仅仅使用HTML和CSS来实现这一点吗？或者我需要学习更多的技术来实现这一点吗？

这可以单独使用HTML来实现：

A.
BB
CCC
DDDD

使用flexbox绝对可以做到这一点。例如：

div.header{
位置：固定；
排名：0；
左：0；
宽度：100vw；
显示：flex；/*此元素是一个flexbox*/
}
a、 钮扣{
背景颜色：绿色；
最小宽度：50px；
文本对齐：居中；
边框：1px纯白；
}
部分{
显示：flex；/*此元素是一个flexbox*/
弯曲方向：行；
柔性包装：nowrap；
背景：粉红色；
}
分栏{
边框：1px纯灰；
最小高度：100vh；
}
/*这些属性设置flexbox元素内的列宽*/
.width-1x{
柔性生长：1；
}
.width-2x{
柔性生长：2；
}
.宽度-3x{
柔性生长：3；
}
.width-4x{
弹性生长：4；
}

只需使用flex box？只需不更改初始宽度？