Текст не будет переноситься внутри моего контейнера flexbox

Question

У меня возникают проблемы при попытке получить текст внутри контейнера flexbox, вместо этого он просто выплескивается в элемент справа, как мне обернуть оба текста?

<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

Рекомендую использовать word-wrap: break-word. В отличие от word-break, он будет создавать разрыв только в том случае, если целое слово не может быть помещено в собственную строку без переполнения.

В качестве примечания, я настоятельно рекомендую начать использовать внешние таблицы стилей и классы CSS, так как со встроенными вы не сможете повторно использовать стили и т. Д., И это гораздо более подвержено ошибкам и сложнее поддерживать при смешивании со всеми разметка.

Фрагмент стека

<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>

Answer 2

break-word на div приведет к этому для тебя

<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>