flexbox prevent width to be shrink?

Question

I specified a fixed width to my 'left box', but if the right content is too long the width is shrink, it's no longer 10px, how to prevent that?

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

I believe you just need to add the flex-shrink: 0, or rather, `flex: 0 0 10px;` — Keno, Mar 01 '19 at 09:43

score 0 · Accepted Answer · answered Mar 01 '19 at 09:43

Define the leftbox flex-shrink to be0:

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

flexbox prevent width to be shrink?

1 Answers1