как решить переполненный текст

Question

Может кто-нибудь, пожалуйста, помогите мне решить макет из моей ручки? http://codepen.io/Sidney-Dev/pen/ALPgbG

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

Я дал дополнение к разделу, где у меня есть таблица, чтобы точно видеть, как содержимое переполняется.

div.tables{ 
    padding: 0 20px; 
} 

Заранее спасибо.

Answer 1

Вы смешиваете display: flex со специфическими width свойствами.

Если вы используете display: flex на вашей таблицы контейнера, придерживайтесь flex: 1 на ваших столах, так что вместо:

table{ 
    width: 50%; 
} 

Go с:

table{ 
    flex: 1; 
} 

Answer 2

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

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