Flexbox columns with padding

HTML

<section class="my-container-thingy">
  <div><div class="border">Bacon ipsum dolor amet capicola ham hock exercitation, consequat tail shank commodo elit mollit in cow non in. Leberkas in flank, dolore in dolor loem jerky. Excepteur exercitation ex filet mignon fatback, irure pork loin jowl anim eiusmod biltong. Ad sint tongue, consectetur ipsum adipisicing enim est veniam landjaeger dolore bacon.</div></div>
  <div><div class="border">Bacon ipsum dolor amet capicola ham hock exercitation, consequat tail shank commodo elit mollit in cow non in. Leberkas in flank, dolore in dolor loem jerky. Excepteur exercitation ex filet mignon fatback, irure pork loin jowl anim eiusmod biltong. Ad sint tongue, consectetur ipsum adipisicing enim est veniam landjaeger dolore bacon.</div></div>
  <div><div class="border">Bacon ipsum dolor amet capicola ham hock exercitation, consequat tail shank commodo elit mollit in cow non in. Leberkas in flank, dolore in dolor loem jerky. Excepteur exercitation ex filet mignon fatback, irure pork loin jowl anim eiusmod biltong. Ad sint tongue, consectetur ipsum adipisicing enim est veniam landjaeger dolore bacon.</div></div>
  <div><div class="border">Bacon ipsum dolor amet capicola ham hock exercitation, consequat tail shank commodo elit mollit in cow non in. Leberkas in flank, dolore in dolor loem jerky. Excepteur exercitation ex filet mignon fatback, irure pork loin jowl anim eiusmod biltong. Ad sint tongue, consectetur ipsum adipisicing enim est veniam landjaeger dolore bacon.</div></div>
  <div><div class="border">Bacon ipsum dolor amet capicola ham hock exercitation, consequat tail shank commodo elit mollit in cow non in. Leberkas in flank, dolore in dolor loem jerky. Excepteur exercitation ex filet mignon fatback, irure pork loin jowl anim eiusmod biltong. Ad sint tongue, consectetur ipsum adipisicing enim est veniam landjaeger dolore bacon.</div></div>
</section>

SCSS

// Breakpoint mixin
$breakpoints: (
	"(min-width : 300px)" "small",
	"(min-width : 600px)" "medium",
	"(min-width : 1025px)" "large",
	"(min-width: 1281px)" "xlarge"
);

@mixin breakpoint($point) {
	@each $breakpoint in $breakpoints {
		$query: nth($breakpoint, 1);
		$name: nth($breakpoint, 2);
		@if ($name == $point) {
			@media #{$query} { @content }
		}
	}
}


$def-pad: 2rem; 

@mixin columns($col-number) {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: calc(100% + #{$def-pad});
  margin-left: calc((#{$def-pad} / 2)* -1);
  >*{
    flex: $col-number 1 (100% / $col-number); 
    max-width: 100% / $col-number;
    padding: $def-pad / 2; 
  }
}


.my-container-thingy {
  @include breakpoint(medium) { @include columns(2); }
  @include breakpoint(large)  { @include columns(3); }
  @include breakpoint(xlarge) { @include columns(4); }
}

// You need this somewehere
* {  box-sizing: border-box;}
// This is just for the demo
.border { border: 1px solid pink; padding: 1rem;}
body {background-color: wheat;}