Is it idiomatic to use static widths in a flex container?

Question

I'm using the following CSS in order to get a quick two-column layout. The div on the left has a static width, and the div on the right fills up the remaining available space:

.container {
  display: flex;
}

.left-column {
  width: 100px;
  background-color: red;
}

.right-column {
  width: calc(100% - 100px);
  background-color: cyan;
}

<div class="container">
  <div class="left-column">
    Lorum ipsum
  </div>
  <div class="right-column">
    Lorum ipsum
  </div>
</div>

This works the way I expect it to. I'm not using the flex property to accomplish this effect in either of my children divs, though. Is this an idiomatic, clean way to accomplish my two-column layout, or should I avoid using display: flex without using more flexbox features?

Answer 1

The more idiomatic way to do it in flex is to use the flex-basis property instead of width, and you can use flex-grow instead of removing some width from 100% so that something will consume the available space.

.container {
  display: flex;
}

.left-column {
  /*width: 100px;*/
  background-color: red;
  flex-basis: 100px;
}

.right-column {
  /*width: calc(100% - 100px);*/
  background-color: cyan;
  flex-grow: 1;
}

<div class="container">
  <div class="left-column">
    Lorum ipsum
  </div>
  <div class="right-column">
    Lorum ipsum
  </div>
</div>