在flex项目中打破长词

我想打破"div2"里面的长词,div2和div3的宽度都不能大于父宽度(即150px).唯一有效的是,word-break: break-all但这也会打破短语.

#div1{
    display: flex;
    max-width: 150px;
    height: 100px;;
}
#div2{
    background-color: gray;
}
#div3{
    background-color: rgb(197, 181, 181);
}
#div4{
    width: 150px; 
    background-color: rgb(144, 199, 172);
}

        
aaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbbbbb
        
oooo


150 px - max width

#div1 {
  display: flex;
  max-width: 150px;
  height: 100px;
  ;
}

#div2 {
  background-color: gray;
  word-break: break-word;
}

#div3 {
  background-color: rgb(197, 181, 181);
}

#div4 {
  width: 150px;
  background-color: rgb(144, 199, 172);
}

  
aaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbbbbb
  
oooo


150 px - max width