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 CSS inside this media query    media all and  min-width  811px          to    flexbox  red     width  25em      But when I do that  this happens   http   i imgur com niFBrwt png  Any idea what I m doing wrong

User · Answer

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%;
}

User · Answer

You should use the flex or flex-basis property rather than width  Read more on MDN    flexbox  red     flex  0 0 25em      The flex CSS property is a shorthand property specifying the ability of a flex item to alter its dimensions to fill available space  It contains   flex-grow  0         do not grow   - initial value  0    flex-shrink  0       do not shrink - initial value  1    flex-basis  25em     width height  - initial value  auto        A simple demo shows how to set the first column to 50px fixed width    x000D   x000D   flexbox   x000D    display  flex  x000D    x000D   red   x000D    background  red  x000D    flex  0 0 50px  x000D    x000D   green   x000D    background  green  x000D    flex  1  x000D    x000D   blue   x000D    background  blue  x000D    flex  1  x000D    x000D   lt div class  flexbox  gt  x000D     lt div class  red  gt 1 lt  div gt  x000D     lt div class  green  gt 2 lt  div gt  x000D     lt div class  blue  gt 3 lt  div gt  x000D   lt  div gt  x000D   x000D   x000D      See the updated codepen based on your code

[html] How to set a fixed width column with CSS flexbox

Examples related to html

Examples related to css

Examples related to flexbox