Search code examples
cssflexboxcss-grid

Flexbox equivalent for fr (fraction) unit

What would be the best analogy for fr(fraction) unit in a flexbox layout? I was thinking of flex: 1 but not sure if it is the best match in terms of its growing/shrinking behavior.

What I'm trying to do is to make a fallback for grid layout so that it works in IE11. I have a grid statement grid-template-columns: 11.25rem 1fr; that I can't make work in IE (even with Auto-prefixer that adds -ms-grid-columns columns still stack on top of each other).

So I was thinking to maybe just implement it in flexbox for IE using something like this:

.container {
  max-width: 46rem;

  .parent {
    display: flex;

    & :first-child {
      inline-size: 11.25rem;
    }

    & :last-child {
      flex: 1;
    }
  }
}
Solution

  • Turned out flex: 1 works for my needs.

    It's a shorthand for flex: 1 1 0px; so

    flex-grow: 1 lets it grow when there is extra space. flex-shrink: 1 lets it shrink when there is not enough space. flex-basis: 0px allows it to have width defined by its content with respect to its container's width.