Элемент Flex исчезает при уменьшении ширины даже при значении flex-shirnk, равном 0

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) (первый элемент Flex отображается).

Как я могу предотвратить это и гарантировать, что grip будет отображаться на любой ширине?