オーバーフローするテキストを解決する方法

Question

誰かが私のレイアウトfrommyペンを解決するのを助けることができますか？ http://codepen.io/Sidney-Dev/pen/ALPgbG

ページのサイズ変更を開始すると、リストの内容がオーバーフローしてしまい、何ができるのか分かりません。

コンテンツがオーバーフローする様子を正しく表示するための表があるセクションにパディングを付けました。

div.tables{ 
    padding: 0 20px; 
} 

ありがとうございます。

Answer 1

display: flexと特定のwidthのプロパティを混在させています。

あなたはそうではなく、あなたのテーブルにflex: 1にこだわる、あなたのテーブルコンテナのdisplay: flexを使用している場合：あなたは上のコンテンツの正当性を設定する必要が

table{ 
    flex: 1; 
} 

Answer 2

：

table{ 
    width: 50%; 
} 

ゴー機能付き要素がフレキシブルな方法を知るように、親コンテナ。テーブルを柔軟に表示するように設定する必要もあります。

div.tables{ 
    padding: 0 20px; 
    justify-content:center; 
} 
table { 
    display:inline-flex 
}