Как в сетке из 3 колонок, где 1 колонка занимает оставшуюся ширину, убрать горизонтальный скролл?

Question

[HealSpirit]

Всем привет. Имеется сетка из 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>

Проблема

Не совсем удобный фикс

Песочница

https://stackblitz.com/edit/js-rsw7xo?file=index.html

Answer 1

[Сергей delphinpro]

Есть вариант задействовать переменные

Условный код:

:root {
  --left: 300px;
  --right: 200px;
}

.left {
  width: var(--left)
}

.right {
  width: var(--right)
}
.center {
  width: calc(100% - var(--left) - var(--right));
}

Соответственно, когда левая колонка скрыта:

.layout {
  --left: 0;
}

Comments

[HealSpirit]

отметил решением, но предложили вариант с min-width: 0 у центральной колонки (https://dfmcphee.com/flex-items-and-min-width-0/)

Answer 2

[Ivan Ustûžanin]

если флексы не принципиально, то есть вариант через грид:

<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>

Answer 3

[HealSpirit]

Подсказали из тематической телеги (нужно добавить 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>

Comments

[Ivan Ustûžanin]

кстати да, забыл про этот способ уменьшения размера элемента флекса