背景

块级元素宽度默认值为100%，而不是auto;因此其宽度不会根据子元素内容动态适应。

如何实现父级元素宽度动态适应其子元素。

方法一 display:inline;

给块级元素设置inline-block值。

{
    display: inline-block;
}

方法二 绝对定位元素

给块级元素设置position：absolute/fixed;

{
 position:absolute; // fixed
}

方法三 浮动元素

{
    float: left;// right
}

方法四 display:flex

//html
<div class="test">
    hello,我是测试文字君。
</div>

.test{
    display:flex;
}

原文地址：https://www.cnblogs.com/wanxiong/p/css-width-based-on-children.html