Flex wrap children

user_1009466 0
Viewed 367

Why is flex wrap not working here? I expect both children to wrap together, but each child only wraps on its own.

.hap-playlist {
  background: #ddd;
  width: 300px;
}

.hap-playlist-title-wrap div {
  display: inline-block;

}

.hap-playlist-title-wrap {
  display: flex-inline;
  flex-direction: row;
  flex-wrap: wrap;
  word-break: break-word;
  overflow-wrap: break-word;

}
<div class="hap-playlist">

  <div class="hap-playlist-title-wrap">
  
    <div class="hap-playlist-title">Orinoco Flow</div><div class="hap-playlist-artist">Enya Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in neque. Vivamus tellus. Donec magna.
    </div>
    
  </div>

</div>

I am looking it to wrap as it was a single div.

flexbox word-wrap css html
2 Answers

It is working correctly, I think you are looking for something like this,

It all depends on the width and the amount of flex each child takes in.

.hap-playlist {
  background: #ddd;
  width: 500px;
}

.hap-playlist-title-wrap div {
  display: inline-block;

}
.hap-playlist-artist {
  flex:3;
}

.hap-playlist-title-wrap {
  display: flex;
  flex-flow: row wrap;
  width: 200px;
  word-break: break-word;
  overflow-wrap: break-word;
}
<div class="hap-playlist">

  <div class="hap-playlist-title-wrap">
  
    <div class="hap-playlist-title">Orinoco Flow</div><div class="hap-playlist-artist">Enya Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in neque. Vivamus tellus. Donec magna.
    </div>
     <div class="hap-playlist-title">Orinoco Flow</div>
 <div class="hap-playlist-title">Orinoco Flow</div>
  </div>

</div>

user_79775810

Why is flex wrap not working here?

It is working correctly :)

For exemple if your parent div do 100px and you children are 90px and `30px``

It means the second child with 30px will be under the child with 90px. It won't be possible for these to be outside the parent with 100px

Here is an exemple if you change the width of your element

.hap-playlist {
  background: #ddd;
  width: 400px;
}

.hap-playlist-title-wrap div {
  display: inline-flex;

}

.hap-playlist-title-wrap {
  display: flex-inline;
  flex-direction: row;
  flex-wrap: wrap;
  word-break: break-word;
  overflow-wrap: break-word;
}

.hap-playlist-artist {
  width: 150px;
}
<div class="hap-playlist">

  <div class="hap-playlist-title-wrap">
  
    <div class="hap-playlist-title">Orinoco Flow</div><div class="hap-playlist-artist">Enya Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in neque. Vivamus tellus. Donec magna.
    </div>
    
  </div>

</div>

user_79422420
Related