Skip to main content

关键字

max-content​

width:max-content表示采用内部元素宽度值最大的那个元素的宽度作为最终容器的宽度。如果出现文本，则相当于文本不换行

width:max-content;

应用场景​

父级设置overflow:hidden,子级设置margin/padding均无效，常常表现在移动端。

<!-- 隐藏滚动条 -->
<div classname='listWrap'>
    <!-- 设置滚动方向 -->
    <div classname='listScroll'>
        <!-- 设置max-content -->
        <div classname='listContent'>
            <div classname='items'>
                子节点1
            </div>
            <div classname='items'>
                子节点2
            </div>
            ...
        </div>
    </div>
</div>

参考​

CSS3四个自适应关键字——fill-available、max-content、min-content、fit-content CSS width中的max-content,min-content,fit-content的区别