Does CSS minmax() Function Work With Flexbox?

The CSS minmax() function was introduced as a part of the CSS Grid Layout specification. It only works with CSS grids, specifically, with the following grid tracking properties:

  1. grid-template-columns;
  2. grid-template-rows;
  3. grid-auto-columns;
  4. grid-auto-rows.

It can be used for setting a size range for grid tracks (i.e. columns and rows), between the specified minimum and maximum values. For example:

#container {
  display: grid;
  grid-template-columns: minmax(100px, 1fr) 150px;

  grid-gap: 5px;
  box-sizing: border-box;
  height: 150px;
  width: 100%;
  background-color: pink;
}

#container > div {
  background-color: aqua;
  padding: 5px;
}
<div id="container">
  <div>Flexible maximum width with a minimum of 100px.</div>
  <div>Inflexible item of 150px width.</div>
</div>

This will produce the following output:

Flexible maximum width with a minimum of 100px.
Inflexible item of 150px width.

This post was published by Daniyal Hamid. Daniyal currently works as the Head of Engineering in Germany and has 20+ years of experience in software engineering, design and marketing. Please show your love and support by sharing this post.