Html 即使Flex shirnk设置为0，宽度收缩时Flex项目也会消失

我正在构建一个ReactJS网格组件，它允许我调整其宽度。通过单击组件的

夹点

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;

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

除了一件事，一切都很好。

夹点

组件在位于其内容右侧的flexbox中渲染。当宽度变小时，

夹点

不会被渲染，因此我无法再选择它。如果单元格太小，这会导致我无法调整单元格大小，因为没有显示要选择的

夹点。检查之前和之后的图像：

之前：


调整大小后：


当单元格宽度小于内容宽度（
单元格内容
）时，
夹点
将消失（第一个弹性项不显示）

如何防止这种情况发生，并保证
夹点将显示在任何宽度上？
您是否能够在JSFIDLE/codepen中重现该问题？这里的答案有用吗？
.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;
}