文字将不会包裹在我的flexbox容器中

Question

I'm having problems trying to get the text inside my flexbox container, instead it just spills out into the element to the right, how can I get both texts to wrap?

 <div style="width:100%; height:auto; display:flex; outline:1px solid red;"> <div style="width:30%; min-height:450px; outline:1px solid red; position:relative; display:flex;"> <div style="width:100%; height:auto; display:flex; flex-direction:column; padding:25px;"> <span style="font-size:20px; color:red; margin-bottom:20px; ">kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk</span> <p style="font-size:15px; color:red; line-height:28px; margin-bottom:20px;">cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc</p> </div> </div> <div style="width:70%; min-height:450px; outline:1px solid red; display:flex; flex-direction:column; padding:25px; "> <table class="section_menu_pala_item_table" data-menu="entrantes" style="width:100%; border:none;"> <tr class="section_menu_pala_item_row" style="margin-bottom:4px;"> <th class="section_menu_pala_item_header" style="border:none; text-align:left;" width="15%">Plato</th> <th class="section_menu_pala_item_header" style="border:none;" width="1%">1/2</th> <th class="section_menu_pala_item_header" style="border:none;" width="1%">1</th> </tr> <!--append rows here--> </table> </div> </div> 

Answer 1

break-word on the div will result in this for ya

 <div style="width:100%; height:auto; display:flex; outline:1px solid red;"> <div style="width:30%; min-height:450px; outline:1px solid red; position:relative; display:flex;"> <div style="width:100%; height:auto; display:flex; flex-direction:column; padding:25px; word-wrap: break-word;"> <span style="font-size:20px; color:red; margin-bottom:20px; ">kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk</span> <p style="font-size:15px; color:red; line-height:28px; margin-bottom:20px;">cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc</p> </div> </div> <div style="width:70%; min-height:450px; outline:1px solid red; display:flex; flex-direction:column; padding:25px; "> <table class="section_menu_pala_item_table" data-menu="entrantes" style="width:100%; border:none;"> <tr class="section_menu_pala_item_row" style="margin-bottom:4px;"> <th class="section_menu_pala_item_header" style="border:none; text-align:left;" width="15%">Plato</th> <th class="section_menu_pala_item_header" style="border:none;" width="1%">1/2</th> <th class="section_menu_pala_item_header" style="border:none;" width="1%">1</th> </tr> <!--append rows here--> </table> </div> </div> 

Answer 2

I recommend to use word-wrap: break-word . It will, in contrast to word-break , only create a break if an entire word cannot be placed on its own line without overflowing.

As a side note, I strongly recommend start using external CSS style sheets and classes, as with inline you won't be able to reuse styles etc., and it is much more error prone and harder to maintain when mixed with all the markup.

Stack snippet

 <div style="width:100%; height:auto; display:flex; outline:1px solid red;"> <div style="width:30%; min-height:450px; outline:1px solid red; position:relative; display:flex;"> <div style="width:100%; height:auto; display:flex; flex-direction:column; padding:25px;"> <span style="word-wrap: break-word;font-size:20px; color:red; margin-bottom:20px; ">kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk</span> <p style="word-wrap: break-word;font-size:15px; color:red; line-height:28px; margin-bottom:20px;">cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc</p> </div> </div> <div style="width:70%; min-height:450px; outline:1px solid red; display:flex; flex-direction:column; padding:25px; "> <table class="section_menu_pala_item_table" data-menu="entrantes" style="width:100%; border:none;"> <tr class="section_menu_pala_item_row" style="margin-bottom:4px;"> <th class="section_menu_pala_item_header" style="border:none; text-align:left;" width="15%">Plato</th> <th class="section_menu_pala_item_header" style="border:none;" width="1%">1/2</th> <th class="section_menu_pala_item_header" style="border:none;" width="1%">1</th> </tr> <!--append rows here--> </table> </div> </div>