горизонтальная прокрутка на втором div

Question

Я застрял в проблеме.Я создал раздел, который выглядит как таблица HTML.Но я не использовал тег "таблица" для этого.

Я использовал HTML и CSS для достижения указанной цели.Теперь проблема в том, что я не могу заставить его реагировать.Я знаю, что могу сделать его отзывчивым, просто используя свойство переполнения.Но я не хочу прокручивать весь раздел.Я просто хочу горизонтальную прокрутку на правой стороне раздела.В моем примере это класс именно right-content, который я хочу прокручивать.Класс, а именно left-content, должен быть там, чтобы, если я прокручиву правую сторону, там была зафиксирована левая сторона, пользователь мог ее увидеть.

<div class="outer-wrapper">

Я прилагаю ссылку на кодовый блок для доступа ко всему коду.

https://codepen.io/Mehreen_Fayaz/pen/KjNoMG

Answer 1

Я думаю, вы честно устанавливаете свойство flex-basis больше, чем полезно, и это вызывает ваши проблемы.

Использование flex-grow / flex-shrink, чтобы освободить место для элемента илиЛучше быть сжатым, чем пытаться быть слишком точным, изменив flex-basis со значения auto.

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

• Удалить display: flex из .outer-wrapper
• Удалить flex-basis: 74% из .right-content и просто установить flex: 0 1 75%
• Просто всегда включайте overflow-x: auto;.right-content, вам не нужен медиазапрос
• Удалите flex-basis: 26% из .left-content и просто установите flex: 1 0 auto
• Удалите flex-basis: 20% из .right-content .head и просто установитеflex: 1

Это должно решить большинство "чрезмерно спроектированных" вещей макета, и затем последнее, что я бы предложил, это добавить несколько отступов вокруг "ячеек таблицы", чтобы на малыхна экранах текст не будет проходить прямо по сторонам, давая некоторую передышку.Но вам также может потребоваться установить для них box-sizing: border-box, чтобы отступы вставляли в текст вместо значений ширины / высоты, которые вы указали.

Удачи.

Answer 2

Я точно не уверен, что это то, что вы ищете, но вы можете просто сделать секцию с классом right-content прокручиваемой с помощью overflow: scroll;. Было бы полезно, если бы внутри раздела было содержимое, чтобы вы могли проверить желаемый результат.