the content of your pseudo element is empty, so it doesn't work on my side.
the following can take effect

.flex::after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden; //
}

has nothing to do with flex, because the child element is larger than the parent element.

    </div>
</div>

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

, including padding-right of the parent container, which is not invalid, but has no effect on the layout.
should be. When the layout styles on both sides cannot be satisfied at the same time, the top left is the starting point of the layout by default, so the left layout styles such as margin-left are preferred.