row and columns with 1 element

First point

The basic code is:

.column, .flex, .row {
    display: flex;
    flex-wrap: wrap;
}
.column {
    flex-direction: column;
}

So for those example it does not make much sens but there is also offset-1 and .col-3 and for this, the .row is needed (there is also a longer block):

@media (min-width: 0)
.row>.offset-1, .row>.offset-xs-1 {
    margin-left: 8.3333%;
}
@media (min-width: 0)
.row>.col-3, .row>.col-xs-3 {
    height: auto;
    width: 25%;
}

I don't know why they did it this way... as they are also able to set col-x normaly (except to increate priority):

.col-0, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-auto, .col-xs-0, .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-auto {
    flex: 0 0 auto;
}

Second point

overflow-auto is just gonna hide the margin of the its children so instead of having margin on parent, it will be on child.