как решить проблему переполнения текста

#html #css

#HTML #css

Вопрос:

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

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

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

 div.tables{
  padding: 0 20px;
}

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

Ответ №1:

Вы смешиваете display: flex с определенными width свойствами.

Если вы используете display: flex контейнер on your tables, придерживайтесь flex: 1 контейнера on your tables, поэтому вместо:

 table{
  width: 50%;
}

Перейдите с:

 table{
  flex: 1;
}

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

2. Я протестировал это на вашем Pen, и ваша проблема с переполнением была решена. Что вы подразумеваете под » flex: 1 не реагирует»? Что вам нужно? Вопрос касался переполнения…

Ответ №2:

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

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