Не адаптируется таблица в моем проекте?

Question

[Qurel]

Помогите, не могу понять в чем причина, именно в моем проекте не адаптируется таблица. Я обернула таблицу в div, дала ему overflow auto, но горизонтальный скролл в таблице не появляется. В консоли разработчика это свойство есть, но оно не применяется. Уже специально вынесла отдельно код в codpen - там все работает.

Comments

[Rustam Bainazarov]

Ну и как, по-вашему, нам можно понять, почему в вашем проекте не работает горизонтальная прокрутка? Где ссылка на код проекта?

[Rikonardo]

Может перекрывается каким-то стилем?
Попробуйте overflow: scroll !important;
UPD: Как сказал человек ниже, действительно лучше overflow: auto !important;.

[Rustam Bainazarov]

Rikonardo, лучше overflow: auto, чтобы не было скролла, когда контент умещается.

[Qurel]

https://github.com/kristina3531/SunTour
https://kristina3531.github.io/SunTour/

[Rustam Bainazarov]

Qurel, написал ответ. Вы неверные параметры для flex-контейнера задали.

Answer 1

[Rustam Bainazarov]

Проблема не в таблице (что вам и показал вынос кода в песочницу), проблема выше -- в общем контейнере.

@media screen and (max-width: 750px)
    .science__wrap {
        /* flex-wrap: wrap;  -- не нужно тут это */ 
        flex-flow: column;  /* вот это нужно; нужно сменить ось flex'а */ 
    }
}

Comments

[Qurel]

Спасибо вам большое, при свойстве flex-flow column все заработало, flex-wrap wrap не отменяла, все работает

[Rustam Bainazarov]

Qurel, не за что!

flex-wrap: wrap; там не нужен, вам нечего переносить.

[Qurel]

SmthTo, я переношу .science__sidebar

[Rustam Bainazarov]

Qurel, вы поменяли ось flex'а с помощью flex-flow: column;, поэтому перенос не нужен, т. к. контент выстраивается в колонку, а не в ряд, как раньше. Иными словами, на мобильном сайдбар у вас уже не переносится, а идёт сразу после контента, что уже говорит о ненужности wrap.

Вообще, из-за wrap в данном случае можно столкнуться с проблемами. Более того, в целом тут даже и flex-то не нужен, но пусть будет на всякий случай.

Посмотрите тут https://stripe.com, как они управляют осью flex'a у контейнеров для колоночного отображения:

body {
    display: flex;
    flex-direction: column;
    /* тут нет flex-wrap вообще, т. е. используется стандартное значение nowrap */
}

Answer 2

[Илья]

https://kristina3531.github.io/SunTour/

Проверил у себя в браузере (Chrome). Задал контейнеру .science__content ширину 300px. Таблица получила сролл. Все работает у Вас.
Не понятен вопрос.

Comments

[Rustam Bainazarov]

Да, потому что вы задали жесткую ширину, так делать совсем не стоит. Дело в другом.