How to set a fixed width column with CSS flexbox

Question

CodePen: http://codepen.io/anon/pen/RPNpaP.

I want the red box to be only 25 em wide when it\'s in the side-by-side view - I\'m trying to achieve this by setting the

Answer 1

In case anyone wants to have a responsive flexbox with percentages (%) it is much easier for media queries.

flex-basis: 25%;

This will be a lot smoother when testing.

// VARIABLES
$screen-xs:                                         480px;
$screen-sm:                                         768px;
$screen-md:                                         992px;
$screen-lg:                                         1200px;
$screen-xl:                                         1400px;
$screen-xxl:                                        1600px;

// QUERIES
@media screen (max-width: $screen-lg) {
    flex-basis: 25%;
}

@media screen (max-width: $screen-md) {
    flex-basis: 33.33%;
}