flex布局+overflow后, 右侧边距消失了

Question

css: 
    .flex{
        width: 500px; height: 50px;
        border: 1px solid pink;
        overflow: auto;
        display: flex; align-items: center;
    }
    .flex-child{
        min-width: 25%;
        border: 1px solid violet;
        margin: 0 5px;
        flex: 0 1 25%; display: flex; align-items: center; justify-content: center;
    }

html: 
    <div class="flex">
        <div class="flex-child">1</div>
        <div class="flex-child">2</div>
        <div class="flex-child">3</div>
        <div class="flex-child">4</div>
        <div class="flex-child">5</div>
    </div>

Answer 1

跟 flex 没关系，是子元素大小超出父元素引起的。

<div class='wrapper'>
    <div class="inner">
    </div>
</div>

.wrapper {
    width: 100px;
    overflow: auto;
}
.inner {
    width: 120px;
}

也会出现这种情况，包括父容器的padding-right，也不是无效，还是有的，但是没起到影响布局的效果。
应该是，超出情况下在两侧布局样式无法同时满足时，默认左上为布局起点，所以优先满足margin-left等左侧布局样式。

Answer 2

楼主你这个伪元素的content里面是空的，我这边不生效。
下面这个可以生效

.flex::after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden; //占位但不可见
}