CODEWITHSUNDEEP
cssfirefoxflexbox
sions
sions

Reputation: 107

Flex and word-break inconsistent behavior between FF and Chrome

I have a basic layout using flex:

<div class="container">
  <div class="left">LongTextWithNoBreaks...</div>
  <div class="right">Short text</div>
</div>

The left div is defined with flex-grow: 3 and the right with flex-grow: 9. Normally the right div is 3 times the size of the left. However when I have a very long text on the left with no white spaces, it works fine in chrome, but not so much in FF (35.0.1).

Note: I'm using word-wrap: break-word; so that the text will break.

Full code:

  .container {
    display: flex;
    flex-flow: row wrap;
    width: 100%;
    word-wrap: break-word;
  }
  .left {
    background: gray;
    flex: 3 0 0;
  }
  .right {
    color: #333;
    background: green;
    flex: 9 0 0;
  }
<div class="container">
  <div class="left">
    supercalifragilisticexpialidocious supercalifragilisticexpialidocioussupercalifragilisticexpialidocioussupercalifragilisticexpialidocioussupercalifragilisticexpialidocious
  </div>
  <div class="right">
    Hello, World!
  </div>
</div>

EDIT: I meant to use word-wrap in the snippet and used word-break instead.

Note: Using break-all isn't a good solution since it breaks by character and not by word. word-break tries first to break by word and only breaks in a middle of a word if necessary.

Upvotes: 1

Views: 636

Answers (1)

sions
sions

Reputation: 107

It looks like the missing piece in FF is to add min-width: 0 to the left element.

  .container {
    display: flex;
    flex-flow: row wrap;
    width: 100%;
    word-wrap: break-word;
  }
  .left {
    background: gray;
    flex: 3 0 0;
    min-width: 0;
  }
  .right {
    color: #333;
    background: green;
    flex: 9 0 0;
    min-width: 0;
  }
<div class="container">
  <div class="left">
    supercalifragilisticexpialidocious supercalifragilisticexpialidocioussupercalifragilisticexpialidocioussupercalifragilisticexpialidocioussupercalifragilisticexpialidocious
  </div>
  <div class="right">
    Hello, World!
  </div>
</div>

Upvotes: 1

Related Questions