Как в сетке из 3 колонок, где 1 колонка занимает оставшуюся ширину, убрать горизонтальный скролл?
Всем привет. Имеется сетка из 3 колонок: левая - фиксированная (300px), центральная - занимает оставшееся пространство, правая - фиксированная (200px). Внутри центральной колонки есть навигация, левая половина центральной колонки отдана под ссылку на предыдущую страницу, правая половина - под ссылку на следующую страницу. В текущей разметке появляется горизонтальный скролл, когда название ссылок достаточно длинное (обрезаю через text-overflow: ellipsis). Понимаю, что скорее всего flex-basis: 50% рассчитывается не по той ширине и если у второй колонки добавить max-width: calc(100% - 500px) проблема исчезнет. Это единственное решение? На это завязываться не очень удобно, так как правая панель может быть скрыта и при адаптиве ширине левой и правой колонок может меняться
Код
<div id="app"> <div style="display: flex"> <div style="flex: 0 0 300px; background-color: tomato">1</div> <div style="flex: 1 1 auto; background-color: pink"> <div style="display: flex"> <div style=" flex-basis: 50%; white-space: nowrap; overflow-x: hidden; text-overflow: ellipsis; " > Prev pageeeeeeeeeeeeeeeeeeeeee </div> <div style=" flex-basis: 50%; white-space: nowrap; overflow-x: hidden; text-overflow: ellipsis; " > Next pageeeeeeeeeeeeeeeeeeeeee </div> </div> </div> <div style="flex: 0 0 200px; background-color: lightblue">3</div> </div> </div> |
<div id="app"> <div style="display: flex"> <div style="flex: 0 0 300px; background-color: tomato">1</div> <div style="flex: 1 1 auto; background-color: pink"> <div style="display: flex"> <div style=" flex-basis: 50%; white-space: nowrap; overflow-x: hidden; text-overflow: ellipsis; " > Prev pageeeeeeeeeeeeeeeeeeeeee </div> <div style=" flex-basis: 50%; white-space: nowrap; overflow-x: hidden; text-overflow: ellipsis; " > Next pageeeeeeeeeeeeeeeeeeeeee </div> </div> </div> <div style="flex: 0 0 200px; background-color: lightblue">3</div> </div> </div>
Проблема
Не совсем удобный фикс
Песочницаhttps://stackblitz.com/edit/js-rsw7xo?file=index.html
Дополнительно:
Есть вариант задействовать переменные
Условный код:
:root { --left: 300px; --right: 200px; } .left { width: var(--left) } .right { width: var(--right) } .center { width: calc(100% - var(--left) - var(--right)); } |
:root { --left: 300px; --right: 200px; } .left { width: var(--left) } .right { width: var(--right) } .center { width: calc(100% - var(--left) - var(--right)); }
Соответственно, когда левая колонка скрыта:
.layout { --left: 0; } |
.layout { --left: 0; }
- отметил решением, но предложили вариант с min-width: 0 у центральной колонки (https://dfmcphee.com/flex-items-and-min-width-0/)
если флексы не принципиально, то есть вариант через грид:
<div id="app"> <div style="display: grid; grid: auto-flow / 300px minmax(0, 1fr) 200px"> <div style="background-color: tomato">1</div> <div style="background-color: pink"> <div style="display: flex"> <div style=" flex-basis: 50%; white-space: nowrap; overflow-x: hidden; text-overflow: ellipsis; " > Prev pageeeeeeeeeeeeeeeeeeeeee </div> <div style=" flex-basis: 50%; white-space: nowrap; overflow-x: hidden; text-overflow: ellipsis; " > Next pageeeeeeeeeeeeeeeeeeeeee </div> </div> </div> <div style="background-color: lightblue">3</div> </div> </div> |
<div id="app"> <div style="display: grid; grid: auto-flow / 300px minmax(0, 1fr) 200px"> <div style="background-color: tomato">1</div> <div style="background-color: pink"> <div style="display: flex"> <div style=" flex-basis: 50%; white-space: nowrap; overflow-x: hidden; text-overflow: ellipsis; " > Prev pageeeeeeeeeeeeeeeeeeeeee </div> <div style=" flex-basis: 50%; white-space: nowrap; overflow-x: hidden; text-overflow: ellipsis; " > Next pageeeeeeeeeeeeeeeeeeeeee </div> </div> </div> <div style="background-color: lightblue">3</div> </div> </div>
Подсказали из тематической телеги (нужно добавить min-width: 0 у центральной колонки). Пока вроде устраивает, буду искать возможные проблемы.
Возможное обоснование - https://dfmcphee.com/flex-items-and-min-width-0/
<div id="app"> <div style="display: flex"> <div style="flex: 0 0 300px; background-color: tomato">1</div> <div style="flex: 1 1 auto; background-color: pink; min-width: 0"> <div style="display: flex"> <div style=" flex-basis: 50%; white-space: nowrap; overflow-x: hidden; text-overflow: ellipsis; " > Prev pageeeeeeeeeeeeeeeeeeeeee </div> <div style=" flex-basis: 50%; white-space: nowrap; overflow-x: hidden; text-overflow: ellipsis; " > Next pageeeeeeeeeeeeeeeeeeeeee </div> </div> </div> <div style="flex: 0 0 200px; background-color: lightblue">3</div> </div> </div> |
<div id="app"> <div style="display: flex"> <div style="flex: 0 0 300px; background-color: tomato">1</div> <div style="flex: 1 1 auto; background-color: pink; min-width: 0"> <div style="display: flex"> <div style=" flex-basis: 50%; white-space: nowrap; overflow-x: hidden; text-overflow: ellipsis; " > Prev pageeeeeeeeeeeeeeeeeeeeee </div> <div style=" flex-basis: 50%; white-space: nowrap; overflow-x: hidden; text-overflow: ellipsis; " > Next pageeeeeeeeeeeeeeeeeeeeee </div> </div> </div> <div style="flex: 0 0 200px; background-color: lightblue">3</div> </div> </div>
- кстати да, забыл про этот способ уменьшения размера элемента флекса
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы создать сетку из трех колонок, где одна колонка занимает оставшуюся ширину и избежать появления горизонтального скролла, можно использовать CSS свойства flexbox.
Пример кода на HTML и CSS:
<div class="container"> <div class="column1">Column 1</div> <div class="column2">Column 2</div> <div class="column3">Column 3</div> </div><div class="container"> <div class="column1">Column 1</div> <div class="column2">Column 2</div> <div class="column3">Column 3</div> </div>
.container { display: flex; flex-wrap: wrap; } .column1 { flex: 0 0 200px; /* фиксированная ширина первой колонки */ } .column2 { flex: 1; /* вторая колонка занимает оставшуюся ширину */ } .column3 { flex: 0 0 200px; /* фиксированная ширина третьей колонки */ }
В данном примере у нас есть контейнер с классом "container" и три дочерних элемента с классами "column1", "column2" и "column3". С помощью свойства "display: flex" мы создаем flex-контейнер, а свойство "flex: 1" для второй колонки позволяет ей занимать все оставшееся пространство.
Таким образом, при использовании данного кода горизонтальный скролл не должен появляться, так как контент будет автоматически адаптироваться к доступной ширине экрана.