Flexbox: правый блок 40% (max 600px), левый — остаток

Простое решение с flexbox (flexbox css): правому блоку даём базовый размер 40% через flex (например, flex: 0 0 40%) и сверху ограничиваем max-width: 600px; левому блоку назначаем flex: 1 1 0% и min-width: 0, чтобы он занимал остаток. При такой настройке при 1024px правый будет ≈410px и левый 614px; при 1920/2560 правый будет ограничен 600px, а левый — 1320px и 1960px соответственно. Для поддержки старых браузеров (Windows 7 / IE10–11) добавьте -ms- префиксы и width: 40% как запасной fallback.

Содержание

• Готовое решение с flexbox (код)
• Почему это работает: flex-basis, flex-grow и max-width
• Кроссбраузерность flexbox и поддержка Windows 7 (IE10/IE11)
• Частые случаи в flexbox: min-width, box-sizing, контент и gap
• Примеры расчётов и проверка
• Источники
• Заключение

Готовое решение с flexbox (код)

Минимальный HTML:

<div class="container">
 <div class="left">Левый — занимает остаток</div>
 <div class="right">Правый — 40% но не более 600px</div>
</div>

CSS с учётом старых браузеров и запасными фолбэками:

.container {
 display: -ms-flexbox; /* IE10 */
 display: flex;
 -ms-flex-direction: row;
 flex-direction: row;
 box-sizing: border-box;
}

/* Левый: занимает остаток */
.left {
 -ms-flex: 1 1 0%; /* IE10/11 */
 flex: 1 1 0%;
 min-width: 0; /* важно, чтобы элемент мог сжиматься */
 box-sizing: border-box;
 /* опционально: overflow handling */
 overflow-wrap: break-word;
}

/* Правый: 40% от контейнера, но не более 600px */
.right {
 -ms-flex: 0 0 40%; /* IE10/11 */
 flex: 0 0 40%;
 width: 40%; /* fallback для очень старых реализаций */
 max-width: 600px; /* верхняя граница */
 box-sizing: border-box;
}

Коротко о логике: flex: 0 0 40% → grow=0, shrink=0, basis=40% (правый стартует как 40% контейнера и не растёт/не сжимается относительно базиса); max-width: 600px ограничивает рост выше 600px; flex: 1 1 0% у левого позволяет ему заполнить всё свободное место. Для объяснений по синтаксису flex смотрите практическое руководство по flexbox на CSS-Tricks.

Почему это работает: flex-basis, flex-grow и max-width

Суть в трёх вещах: базовый размер, распределение свободного места и ограничение сверху.

• flex-basis (в нашем примере через сокращённое flex) задаёт начальный основной размер элемента; процентные значения считаются от внутренней ширины контейнера. Подробно — на MDN: flex-basis.
• flex-grow и flex-shrink управляют тем, как элементы растут или сжимаются от базового размера. В записи flex: 0 0 40% мы явно запрещаем рост и сжатие относительно базиса, оставляя левому блоку всё свободное пространство (flex: 1 1 0%).
• max-width: 600px применяет верхнюю границу: если 40% от контейнера больше 600px — правый блок остановится на 600px, а остальное пространство займёт левый. Это поведение объясняется в обзоре о размерах flex-элементов на Smashing Magazine.

Звучит просто — но что насчет мелких деталей? Проценты в flex-basis вычисляются от доступного внутреннего размера контейнера (без внешних отступов), поэтому учитывайте padding/box-sizing, чтобы вычисления совпадали с ожиданиями.

Кроссбраузерность flexbox и поддержка Windows 7 (IE10/IE11)

Windows 7 обычно предполагает Internet Explorer 10/11 в корпоративных средах. Реализации flexbox в старых IE имеют нюансы, поэтому:

• Добавьте префиксы -ms- (см. пример выше). Запись -ms-flex: 0 0 40% — рабочая для IE10/11.
• Оставьте width: 40% как запасной fallback — если реализация flex некорректна, браузер применит width.
• Используйте Autoprefixer в сборке проекта — он сгенерирует корректные префиксы автоматически и снизит риск багов.
• Тестируйте в реальных окружениях (VM, BrowserStack или физический Windows 7). На StackOverflow есть обсуждения кейсов с max-width и flex-элементами: Setting a max-width for flex items?.

Замечание про IE: у некоторых старых реализаций есть баги с округлением и поведением min-width:auto. Поэтому на левом элементе ставим min-width: 0 — это часто решает неожиданный выход контента за границы.

Частые случаи в flexbox: min-width, box-sizing, контент и gap

• min-width: по умолчанию у некоторых элементов значение может помешать сжатию. min-width: 0 или overflow: hidden у левого блока решат проблему, когда он не сжимается.
• box-sizing: всегда полезно установить box-sizing: border-box, чтобы padding не увеличивал фактическую ширину и не ломал вычисления 40%/max-width.
• Длинные слова или неконтролируемый контент: добавьте overflow-wrap: break-word или word-break в зависимости от случая.
• Отступы между колонками: свойство gap для flex не поддерживалось в очень старых браузерах — для совместимости используйте margin на элементе (например, margin-left) как fallback.
• Точность и округление: браузеры могут рендерить дробные пиксели. 1024×0.4 = 409.6 — в интерфейсе это обычно выглядит как 410px из‑за округления/субпикселей.

Если хотите, чтобы правый элемент мог сжиматься ниже 40% на экстремально узких экранах, замените flex: 0 0 40% на flex: 0 1 40% (тогда shrink=1). Но учтите: это изменит логику распределения в узких контейнерах.

Примеры расчётов и проверка

Приведём ваши примеры и арифметику:

• Контейнер 1024px: 40% → 1024 * 0.4 = 409.6px → ≈410px (браузер округляет); левый = 1024 − 410 = 614px.
• Контейнер 1920px: 40% → 768px, но max-width: 600px ограничит правый до 600px; левый = 1920 − 600 = 1320px.
• Контейнер 2560px: 40% → 1024px → ограничение max-width: 600px → правый = 600px; левый = 2560 − 600 = 1960px.

Как тестировать:

• Откройте страницу и проверяйте инструменты разработчика, обращая внимание на computed width.
• Тестируйте в IE10/11 на Windows 7 (виртуалка или BrowserStack).
• Проверьте поведение при содержимом, которое не переносится (длинные слова) и при добавлении padding/margin (box-sizing помогает сохранить предсказуемость).

Источники

• flex-basis — MDN Web Docs
• A Complete Guide to Flexbox — CSS-Tricks
• Flexbox: How Big Is That Flexible Box? — Smashing Magazine
• Как работает Flexbox в CSS — WP-Kama
• CSS3 flexbox — HTML5Book
• How CSS Flexbox Works — TProger (перевод/обзор)
• Setting a max-width for flex items? — Stack Overflow
• Установка фиксированной ширины колонки с помощью CSS Flexbox — Sky.pro

Заключение

Коротко: использовать flexbox проще, чем кажется — правому блоку ставим flex: 0 0 40% + max-width: 600px и width: 40% как запасной вариант; левому — flex: 1 1 0% + min-width: 0. Это даёт требуемые размеры (≈410px при 1024px, 600px при 1920/2560px) и совместимо с Windows 7 при добавлении -ms- префиксов и базовых fallback-правил. Если нужно, могу подготовить готовый CodePen/Demo и набор тестов для IE10/11.