FlexRow mimicking container queris

components/01_Layouts/flexRow/_flexRow.styl

@@ -12,29 +12,38 @@ RV-FlexRow--horizontal()
 RV-FlexRow--vertical()
 	+RV-Block__Modifier--name('vertical')
 		flex-direction column
-	
+
 /*
  * Breaks from row to column orientation at the given breakpoint
  * breaks when the container is smaller than $-localBreakPoint or when the viewport is smaller than $-mediaBreakPoint.
  */
 RV-FlexRow--breakPoint(localBreakPoint, mediaBreakPoint)
 	+RV-Block__Modifier--name('breakPoint')
-		flex-wrap wrap
 		RV-Reset()
 		gap 0px
+		height unset
 		
 		RV-Utils__ElementAmount--range(0, 20, @(index, total){
 				min-width "calc((%s - (var(--spacing-inner) * (%s - 1))) / %s - (2 * var(--spacing-inner)))" % (localBreakPoint index index)
 			}
 		)
-
+		
 		+RV-Element('Item')
 			min-width initial
 			flex-basis 'calc(%s * 999 - 100% * 999)' % localBreakPoint
 			overflow hidden
+			
+			+RV-Element__Modifier('outsideBreakPoint')
+				margin-bottom -100vh
+				height max-content
+				flex-shrink 999
+				
+			+RV-Element__Modifier('insideBreakPoint')
+				flex-grow 0
 		
 		@media(max-width mediaBreakPoint)
 			flex-direction row
+	
 
 /*
  * Typical Flexbox behavior, Row is horizontal, but item are wraped individualy
@@ -118,6 +127,7 @@ RV-FlexRow__Item--content()
 RV-FlexRow()
 	display flex
 	height 100%
+	overflow-y hidden
 
 +RV-Block('RV-FlexRow')
 	RV-FlexRow()

components/01_Layouts/flexRow/flexRow.hbs

@@ -2,8 +2,11 @@
 	<div class="RV-FlexRow__Item RV-Dummy">
 		<div class="RV-Dummy__Square--small"></div>
 	</div>
-	<div class="RV-FlexRow__Item RV-FlexRow__Item--right RV-Dummy">
-		<div class="RV-Dummy__Square--small"></div>
+	<div class="RV-FlexRow__Item RV-FlexRow__Item--outsideBreakPoint RV-FlexRow__Item--right RV-Dummy RV-Dummy--red">
+		<div class="RV-Dummy__Square--small">Larger</div>
+	</div>
+	<div class="RV-FlexRow__Item RV-FlexRow__Item--insideBreakPoint RV-FlexRow__Item--right RV-Dummy--yellow RV-Dummy">
+		<div class="RV-Dummy__Square--small">Smaller</div>
 	</div>
 	<div class="RV-FlexRow__Item RV-FlexRow__Item--center RV-Dummy">
 		<div class="RV-Dummy__Square--small"></div>