white-space: nowrap unterbricht Flexbox-Layout [duplizieren]

Ich habe ein reaktionsfähiges Layout für eine App mit Flexbox erstellt. Das Layout erfordert ein kollabierbares Menü auf der linken Seite, einen Block mit einem Header und einem Body in der Mitte und einen umschaltbaren Hilfebereich auf der rechten Seite (es gibt mehr dazu, aber das ist die Grundstruktur).

Das linke Menü hat zwei Zustände: 180 Pixel breit oder 80 Pixel breit. Der Hilfebereich ist entweder ausgeblendet oder benötigt 180px. Die mittlere Box nimmt den Rest des Raumes ein. Flexbox funktioniert wie ein Zauber.

Das Problem beginnt, wenn ich mit white-space: nowrap ein scrollendes Diving mache. Ich habe eine Reihe von Items, die in einem horizontalen Scroller angezeigt werden müssen, also habe ich ein Listendiv mit den Items, die auf overflow:auto und white-space: nowrap gesetzt sind.

Normalerweise funktioniert das wie ein Zauber, aber jetzt bricht es mein flexibles Layout. Anstatt die Breite des übergeordneten (flex) div zu nehmen, vergrößert der Scroller den div-Wert, was wiederum den help-Bereich außerhalb der Grenzen verschiebt.

Die folgende Geige veranschaulicht dieses Problem:

Ссылка

Sie können den Hilfebereich umschalten, indem Sie in der Menüleiste auf toggle help klicken. Erstellen Sie das Problem erneut, indem Sie im Menü auf list whitespace toggle klicken. Dadurch wird die white-space: no-wrap CSS-Eigenschaft der Liste umgeschaltet. Wenn das Hilfefenster geöffnet ist, können Sie sehen, dass es außerhalb der Grenzen verschoben wird.

Die untere Liste ist, was ich erreichen möchte, aber ich möchte, dass es die volle Breite des Elternteils ist.

Ich kann das Problem in Chrome, Firefox, Opera, Vivaldi und Edge neu erstellen. Internet Explorer 11 spielt nett (° _ °). Ich würde eine reine CSS-Lösung bevorzugen (SCSS ist auch eine Option), aber wenn nötig, kann ich JS verwenden.