For an inline-flex container, `flex: 0 0 120px` does not work while `width: 120px` does. What flexbox rules specify this behavior?

Question

The following makes the flex items overflow:

#container {
  display: inline-flex;
  border: 1px dashed blue
}

#container div {
  flex: 0 0 120px;
  border: 1px dashed orange
}

<div id="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

I thought inline-flex in general tries to accommodates all items into its width?

The following works:

#container {
  display: inline-flex;
  border: 1px dashed blue
}

#container div {
  width: 120px;
  border: 1px dashed orange
}

<div id="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

What rules specify this behavior and how should you usually think about it when designing?