css中paddingright失效,子元素内容超出父元素时，padding-right失效，没有留白

场景介绍

父元素内有数量不固定的子元素，当子元素宽度之和小于父元素时，子元素平均分配父元素宽度；当子元素宽度之和大于父元素时，子元素有最小宽度，滚动条显示。

1. 子元素宽度小于父元素，上下左右留有空白

2. 子元素宽度大于父元素，上下左右留有空白

错误实现

.box {

width: 500px;

border: 1px solid #e0e0e0;

padding: 20px;

display: flex;

overflow: auto;

box-sizing: border-box;

}

.con1 {

flex: 1;

min-width: 100px;

height: 80px;

border: 1px solid red;

}

复制代码

当子元素宽度之和大于父元素时，上下左都留有空白，右无空白

正确实现方式

方法1：多增加一层包裹元素

/*附加样式*/

.method-one {

padding: 0;

}

.content {

flex: 1;

display: flex;

padding: 20px;

}

复制代码

方法2：after伪元素添加宽度为20的占位元素

/*附加样式*/

.method-two {

padding-right: 0;

}

.method-two::after {

content: '';

width: 20px;

flex-shrink: 0;

}

复制代码

看似简单的问题却又不简单，奥力给！！

如有不对的地方或者好的实现方式，欢迎指正哦！