Flex item disappear on width shrink even with flex-shirnk set to 0

Question

I'm building a ReactJS grid component that will allow me to resize its width. The resize is done by clicking on the grip div of the component and dragging it left or right. My code:

class Cell extends Component {

  handleGrip = event => {
    if (this.props.onGrip) this.props.onGrip(event);
  };

  render() {
    let gripComponent = (
      <div
        onMouseDown={this.handleGrip}
        className="cell-grip"
      />
    );

    let width = this.props.width;

    return (
      <div
        className={"cell-container"}
        style={{ width: width }}
      >
        <div className="cell-content">{this.props.children}</div>
        {gripComponent}
      </div>
    );
  }
}

export default Cell;

SCSS Class:

.cell-container {
    width: 100%;
    border: 1px solid $ux-theme-color-border;
    margin: 0 -1px 0 0;
    background-color: $ux-theme-color-white;
    display: flex;
    flex-direction: row;
}

.cell-content {
    flex-shrink: 1;
    width: 100%;
    padding: 5px;
    font-size: 12px;
}

.cell-grip {
    flex-shrink: 0;
    width: 5px;
    min-width: 5px;
    cursor: ew-resize;
    background-color: $ux-theme-color-border;
}

(The full widht calculation and event handling is not shown here)

All working fine, except for one thing. The grip component is rendered in a flexbox right positioned to its content. When the width gets to small, the grip is not rendered and therefore I cannot select it any more. This causes me to be unable to resize the cell if it gets too small, as there is no grip shown to select. Check images before and after:

Before:

After resize:

The grip disappear once the width of the cell gets smaller than the width of the content (cell-content) (first flex item do show).

How can I prevent this to happen and guarantee that the grip will be shown on any width?