Is the use of static width in a flexible container idiomatic?

Question

I use the following CSS to get a quick two-column layout. divit has a static width on the left, and divfills the remaining free space on the right:

.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>

Run codeHide result

It works as I expect. However, I do not use the property flexto perform this effect in any of my children divs. Is this an idiomatic, clean way to execute my two-column layout, or should I avoid using display: flexwithout using additional flexbox features?

Answer 1

flex flex-basis , flex-grow 100%, - .

.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>

Hide result

Answer 2

.right-. , flexbox.

.right-column {flex: 1;background-color: cyan;}

. 100px {calc (100% - 100px) }. flex: 1, .

Thannks,

Answer 3

: https://jsfiddle.net/sheriffderek/bo0ruwvm/

... - flex-basis grow/shrink -

width: 100%; max-width: 400px;etc. in general situations for modules and layout. Static height and width are not buoys.

Markup

<section class='container'>
  <div class='side one'>
    one(left)
  </div>

  <div class='side two'>
    two(right)
  </div>
</section>

styles

.container {
  display: flex;
  border: 1px solid red;
}

.one {
  flex-basis: 100px; /* if possible be this width */
  /* you COULD just say width: 100px... */
  flex-shink: 0; /* if you DONT want it to ever shrink to fit */
  /* not nessesary in most cases */
  background: lightgreen;
}

.two {
  flex-grow: 1; /* fill available space */
  background: cyan;
}