Заставьте flex-wrap игнорировать определенные элементы

Question

У меня есть макет flex-box с 4 колонками с включенной функцией flex-wrap:

Когда я изменяю размер страницы и края страницы касается заголовка <h1>, синий столбец корректно оборачивается:

Теперь я хочу добавить, скажем, 25 изображений рядом с друг с другом внутри div, который переполняется на x, вызывает полосу прокрутки, но не оборачивает синий столбец вниз, если другое содержимое не становится слишком маленьким

Итак, полоса прокрутки появляется правильно, но как только она появляется, синяя колонка пытается развернуться и обернуться вниз. Я хочу, чтобы изображение всегда было меньше синего столбца, но даже если я установлю его на 50% ширины, оно все равно расширяет синий столбец, который затем оборачивается.

Можно ли обернуть синюю колонку, только если содержимое меньше тега <h1>, и полностью игнорировать катушку изображения?

Я сделал codepen фрагмент для него, а также добавленный пример кода ниже:

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  color: white;
}

.green {
  background-color: green;
}

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

.black {
  background-color: black;
}

.display\:flex {
  display: flex;
}

.flex-direction\:column {
  flex-direction: column;
}

.flex-direction\:row {
  flex-direction: row;
}

.flex-wrap\:wrap {
  flex-wrap: wrap;
}

.flex-grow\:100 {
  flex-grow: 100;
}

.flex-grow\:2 {
  flex-grow: 2;
}

.flex-grow\:1 {
  flex-grow: 1;
}

.flex-grow\:0 {
  flex-grow: 0;
}

.flex-shrink\:1 {
  flex-shrink: 1;
}

.height\:100vh {
  height: 100vh;
}

.reel {
  display: flex;
  overflow-x: auto;
}

.reel>img {
  height: auto;
  max-width: 25%;
}

.reel>*+* {
  margin-left: 10px;
}

<div class="display:flex flex-direction:row flex-wrap:wrap height:100vh">
  <div class="black flex-grow:0">
    Column1
  </div>
  <div class="red flex-grow:1">
    Column2
    <br />
    <input>
    <br />
    <input>

  </div>
  <div class="green flex-grow:2">
    Column3
    <br />
    <input>
    <br />
    <input>
  </div>
  <div class="blue flex-grow:100">
    <h1>
      This is some long header text in Column4
    </h1>
    <div class="reel">
      <img src="https://i.imgur.com/M7LUTq5.jpg">
      <img src="https://i.imgur.com/M7LUTq5.jpg">
      <img src="https://i.imgur.com/M7LUTq5.jpg">
      <img src="https://i.imgur.com/M7LUTq5.jpg">
      <img src="https://i.imgur.com/M7LUTq5.jpg">
      <img src="https://i.imgur.com/M7LUTq5.jpg">
      <img src="https://i.imgur.com/M7LUTq5.jpg">
      <img src="https://i.imgur.com/M7LUTq5.jpg">
      <img src="https://i.imgur.com/M7LUTq5.jpg">
      <img src="https://i.imgur.com/M7LUTq5.jpg">
      <img src="https://i.imgur.com/M7LUTq5.jpg">
      <img src="https://i.imgur.com/M7LUTq5.jpg">
      <img src="https://i.imgur.com/M7LUTq5.jpg">
      <img src="https://i.imgur.com/M7LUTq5.jpg">
      <img src="https://i.imgur.com/M7LUTq5.jpg">
    </div>
  </div>
</div>

Answer 1

1) Настройки .reel>img { flex-shrink: 0 } покажут полосу прокрутки под вашими изображениями

2) Когда вы не используете flex-grow для относительного роста по сравнению с элементами одного уровня, а просто установите .red,.green,.blue { flex-grow: 1 } и используйте flex-basis: xx% за цвет, тогда происходит перенос.

Каким-то образом браузеру нужна ширина для работы. См. /* ADDED CODE */ в CSS ...

ОБНОВЛЕНИЕ

ОП спросил:

Есть ли способ сохранить черные, красные и зеленые столбцы занимают больше места, чем им нужно, чтобы синий столбец занимал все доступное пространство?

Этого можно добиться, установив для всех, кроме .blue, значение flex-grow: 0; flex-basis: auto (по умолчанию flexbox) для начала и .blue flexbasis в процентах> 0% и <100% (точнее: менее 100% минус общая ширина <code>.black, .red и .green). Настройка .blue { flex-basis: auto } не будет работать, так как она будет немедленно перенесена из-за ее flex-grow: 1.

Обновлен код, чтобы отразить вышеупомянутое (OVERRIDE 1) и добавлены окончательные значения, которые OP в конечном итоге использовал (OVERRIDE 2).

Просто попробуйте и посмотрите, что работает для вас ...

        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            padding: 0;
            color: white;
        }

/* ADDED CODE (original answer) */
.black  { flex-basis:  5% } /* example values */
.red    { flex-basis: 15% }
.green  { flex-basis: 30% }
.blue   { flex-basis: 50% } /* [MUST] add up to 100% */

        .reel > img {
            flex-shrink: 0;
        }

/* OVERRIDE 1: ADDED CODE, as per OP remarks (UPDATE) */
.black  { flex-basis: auto }
.red    { flex-basis: auto }
.green  { flex-basis: auto }
.blue   { flex-basis: 25%  }

/* OVERRIDE 2: OP final choice */
.black  { flex-basis:  50px }
.red    { flex-basis: 100px }
.green  { flex-basis: 100px }
.blue   { flex-basis:  25%  }

/**/
        .green {
            background-color: green;
        }

        .red {
            background-color: red;
        }

        .blue {
            background-color: blue;
        }

        .black {
            background-color: black;
        }

        .display\:flex {
            display: flex;
        }

        .flex-direction\:column {
            flex-direction: column;
        }

        .flex-direction\:row {
            flex-direction: row;
        }

        .flex-wrap\:wrap {
            flex-wrap: wrap;
        }

        .flex-grow\:100 {
            flex-grow: 100;
        }

        .flex-grow\:2 {
            flex-grow: 2;
        }

        .flex-grow\:1 {
            flex-grow: 1;
        }

        .flex-grow\:0 {
            flex-grow: 0;
        }

        .flex-shrink\:1 {
            flex-shrink: 1;
        }

        .height\:100vh {
            height: 100vh;
        }

        .reel {
            display: flex;
            overflow-x: auto;
        }


        .reel > img {
            height: auto;
            max-width: 25%;
        }

        .reel > * + * {
            margin-left: 10px;
        }

<body class="width:100%">
<div class="display:flex flex-direction:row flex-wrap:wrap height:100vh">
    <div class="black flex-grow:0">
        Column1
    </div>
    <div class="red flex-grow:1">
        Column2
        <br />
        <input>
        <br />
        <input>

    </div>
    <div class="green flex-grow:1">
        Column3
        <br />
        <input>
        <br />
        <input>
    </div>
    <div class="blue flex-grow:1">
        <h1>
            This is some long header text in Column4
        </h1>
        <div class="reel">
            <img src="https://i.imgur.com/M7LUTq5.jpg">
            <img src="https://i.imgur.com/M7LUTq5.jpg">
            <img src="https://i.imgur.com/M7LUTq5.jpg">
            <img src="https://i.imgur.com/M7LUTq5.jpg">
            <img src="https://i.imgur.com/M7LUTq5.jpg">
            <img src="https://i.imgur.com/M7LUTq5.jpg">
            <img src="https://i.imgur.com/M7LUTq5.jpg">
            <img src="https://i.imgur.com/M7LUTq5.jpg">
            <img src="https://i.imgur.com/M7LUTq5.jpg">
            <img src="https://i.imgur.com/M7LUTq5.jpg">
            <img src="https://i.imgur.com/M7LUTq5.jpg">
            <img src="https://i.imgur.com/M7LUTq5.jpg">
            <img src="https://i.imgur.com/M7LUTq5.jpg">
            <img src="https://i.imgur.com/M7LUTq5.jpg">
            <img src="https://i.imgur.com/M7LUTq5.jpg">
        </div>
    </div>
</div>
</body>