Html css最小宽度和自动宽度组合

我想一个div是一定宽度的最小值，但如果内容更多，则自动扩展。我有短代码形式的选项卡式菜单选项，每个选项有2个字符。有些选项可以跨越3个、4个或更多字符。每当显示超过2个字符的选项时，div应自动展开。我曾经在JavaScript中这样做过，但不想在这里使用，因为我有太多的项目，主要是寻找基于CSS的解决方案

我尝试了最小宽度和自动宽度在同一时间，但他们不工作

以下是我的代码：

.inner{
    width:auto;
    min-widht:23px;
    margin:2px 2px 2px 2px;
    height:23px;
    border: 3px solid #A3A0FA;
    border-radius: 1px;
    text-align:center;
    box-shadow: 0px 1px 1px transparent inset, 0px 0px 8px transparent;
    padding-left:5px;//Added after posting the question, this works for me
    padding-right:5px;//Added after posting the question, this works for me
}

<div class="inner">AB</div>
<div class="inner">ABCD</div>
<div class="inner">ABC</div>

---

提前谢谢

内联块不就是这样工作的吗？内联块会将下一个div内联放置，但不会控制div的宽度！！我正在显示div中的内容，div有边框，因此当内容增加时，div应该扩展。然后我建议您使用完整信息和现有代码演示此问题，这样我们就不必猜测问题的实质。浮动如何？-展示：桌子-