flexbox防止宽度缩小？

Question

我为“左框”指定了固定的宽度，但是如果正确的内容太长，则宽度会缩小，不再是10px，如何防止这种情况发生？

.flex {
  display: flex;
}

.left {
  width: 10px;
  height: 10px;
  border: 1px solid;
}

.right {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14px;
}

<div class="flex">
  <div class="left">

  </div>
  <div class="right">
    hello world this and that etc hello world this and that etc hello world this and that etc hello world this and that etc hello world this and that etc
  </div>
</div>

Answer 1

将左框flex-shrink定义为0：

.flex {
  display: flex;
}

.left {
  width: 10px;
  height: 10px;
  border: 1px solid;
  flex-shrink: 0;
}

.right {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14px;
}

<div class="flex">
  <div class="left">

  </div>
  <div class="right">
    hello world this and that etc hello world this and that etc hello world this and that etc hello world this and that etc hello world this and that etc
  </div>
</div>