即使将flex-shirnk设置为0，Flex项目在宽度缩小时也会消失

Question

我正在构建一个ReactJS网格组件，这将允许我调整其宽度。通过单击组件的grip div并将其向左或向右拖动来调整大小。我的代码：

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类：

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

（完整的宽度计算和事件处理未在此处显示）

一切正常，除了一件事。 grip组件在一个紧靠其内容的Flexbox中呈现。当宽度变小时，grip不会呈现，因此我无法再选择它。如果单元格太小，这将导致我无法调整其大小，因为没有显示grip可供选择。前后检查图像：

之前：

调整大小后：

一旦单元格的宽度小于内容的宽度（grip），cell-content就会消失（第一个弹性项目会显示）。

如何防止这种情况发生并保证grip将以任何宽度显示？