Flexbox div文本包装

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>

Answer 3

You should change flex-wrap: wrap; to flex-wrap: nowrap;

Please note that flex-wrap: no-wrap; ( no-wrap with a dash ) is NOT a valid value. Here's the doc reference about it: https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap