Html 子div导致父div占据整个页面宽度

我正在尝试创建一个div，它的宽度根据内部的文本而变化

父div宽度为自动，子div宽度设置为100%，即父div宽度的百分比

但是父div占据了整个页面的宽度。如何在动态更改文本长度的同时保持div的最小宽度，使整个文本在一行中

下面是实现

。没有填充任何图标{
边框宽度：0px；
位置：相对位置；
填充：0px；
宽度：自动；
高度：自动；
最小宽度：91px；
最小高度：36px；
背景色：rgba（0,0,0,0）；
}
.没有填充图标。矩形-3{
边框宽度：1px；
位置：绝对位置；
填充：0px；
宽度：100%；
身高：100%；
最小宽度：91px；
最小高度：36px；
边界半径：4px4px4px4px；
背景色：rgba（0150.0136.0255）；
左：0%；
最高：0%；
}
.未填充任何图标。内容{
边框宽度：0px；
位置：绝对位置；
填充：0px；
宽度：计算（100%-32px）；
高度：17px；
最小宽度：59px；
最小高度：17px；
背景色：rgba（0,0,0,0）；
左：16px；
顶部：计算值（50%-8.5px）；
}
.未填充图标.内容.标签{
边框宽度：1px；
位置：绝对位置；
填充：0px；
宽度：计算（100%-0px）；
高度：17px；
最小宽度：59px；
最小高度：17px；
颜色：rgba（255255）；
字体系列：Roboto中型；
字体大小：14px；
字号：500；
字母间距：0.75px；
线高：16.40625px；
左：0px；
顶部：计算值（50%-8.5px）；
}

按钮测试
按钮

添加显示：内联块；到父元素。默认情况下，div具有占据整个宽度或线条的display:block。运行下面的代码，谢谢

。没有填充任何图标{
边框宽度：0px；
位置：相对位置；
填充：0px；
宽度：自动；
高度：自动；
最小宽度：91px；
最小高度：36px；
背景色：rgba（0,0,0,0）；
显示：内联块；
}
.没有填充图标。矩形-3{
边框宽度：1px；
位置：绝对位置；
填充：0px；
宽度：100%；
身高：100%；
最小宽度：91px；
最小高度：36px；
边界半径：4px4px4px4px；
背景色：rgba（0150.0136.0255）；
左：0%；
最高：0%；
}
.未填充任何图标。内容{
边框宽度：0px；
位置：绝对位置；
填充：0px；
宽度：计算（100%-32px）；
高度：17px；
最小宽度：59px；
最小高度：17px；
背景色：rgba（0,0,0,0）；
左：16px；
顶部：计算值（50%-8.5px）；
}
.未填充图标.内容.标签{
边框宽度：1px；
位置：绝对位置；
填充：0px；
宽度：计算（100%-0px）；
高度：17px；
最小宽度：59px；
最小高度：17px；
颜色：rgba（255255）；
字体系列：Roboto中型；
字体大小：14px；
字号：500；
字母间距：0.75px；
线高：16.40625px；
左：0px；
顶部：计算值（50%-8.5px）；
}

按钮测试
按钮

不完全清楚为什么要将如此简单的设计变成复杂的HTML/CSS。但一般来说，您可以将容器设置为

显示：内联块

，因为它具有收缩以适应功能。下面的示例没有任何标记更改

不要将

.content

设置为绝对位置。就像一个容器只包含绝对定位的元素一样，只有在您给它一定的大小时，它才会塌陷为零，但它不会意识到其中的内容，这意味着框的大小不能是动态的

。没有填充任何图标{
位置：相对位置；
显示：内联块；
高度：36px；
线高：36px；
填充：0 10px；
颜色：#fff；
}
.没有填充图标。矩形-3{
位置：绝对位置；
左：0；
排名：0；
宽度：100%；
身高：100%；
边界半径：4px；
背景色：rgba（0、150、136、255）；
}
.未填充任何图标。内容{
位置：相对；/*增加堆叠顺序*/
}

按钮
Lorem ipsum dolor sit amet

使用最大宽度：100%；代替宽度：100%；那么，如果我把里面的文本改为更长的文本，它会移到下一行。顺便说一句，为什么你的html布局像这样？为什么需要将.3矩形作为浮动背景，而不是填充的非图标作为背景？@JerdineSabio是的，这有点奇怪。我正在尝试为figma设计组件编写css生成器。我正在尝试为设计组件编写一个自动CSS和HTML生成器。Figma有组/框架/层等子组件，所以我认为它们是一个HTML等价的div，可以包含其他div。一旦基本CSS生成完成，我计划将不必要的div合并到父div中。如果我将其中的文本更改为更长的文本，它将移到下一行，而不是扩展div您可以在问题的注释中看到为什么以及如何使用当前的HTML/CSS代码。但是有没有什么方法可以在不减少/更改现有层次结构的情况下实现这一点？这很有意义，我已经将不必要的div合并到单个div中，并删除了position:absolute。