Flexbox div text wrapping

Question

I want to make text in my flexbox layout wrap.

Code: https://jsfiddle.net/u2oswnth/2/

.child {
  border: solid 1px;
  display: flex;
}
.left {
  width: 100px;
}
.container {
  display: flex;
  flex-wrap: wrap;
}

<div class="container">
  <div class="child left">
    Left!
  </div>
  <div class="child right">
    I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!!
  </div>
</div>

What I have: When exceeding frame width, .right div falls to next row.

What I want: When exceeding frame width, words in .right div start wrapping, two columns stay side-by-side, forming single row.

Answer 1

Change flex-wrap: wrap; to flex-wrap: nowrap;. By using flex-wrap: wrap; you are telling the .right div to wrap onto a new line if it runs out of space. As you only want the text itself to wrap you need to use flex-wrap: nowrap; to keep .right on the same line. The text will automatically wrap when there is not enough space.

• Change flex-wrap: wrap; to flex-wrap: nowrap; on .container

.child {
  border: solid 1px;
  display: flex;
}
.left {
  width: 100px;
}
.container {
  display: flex;
  flex-wrap: nowrap;
}

<div class="container">
  <div class="child left">
    Left!
  </div>
  <div class="child right">
    I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!!
  </div>
</div>

Answer 2

NOTE: There is no need to apply "display: flex" on child class and flex-wrap: nowrap; on container class because bydefault it is nowrap. Below is updated answer and WORKS!!.

.child {
  border: solid 1px;
}
.left {
  width: 100px;
}
.container {
  display: flex;
} 

<div class="container">
  <div class="child left">
    Left!
  </div>
  <div class="child right">
    I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!!
  </div>
</div>