Согните ребенка с ребенком без упаковки

Question

У меня очень специфический c гибкий сценарий использования, который я не совсем понимаю, почему он ведет себя так, как есть. У меня есть две колонки. Правый столбец имеет фиксированную ширину и flex-shrink: 0. В левом столбце есть flex-shrink: 1, flex-grow: 1, и, что особенно важно, дочерний элемент с width: 100%, white-space: nowrap и overflow-x: scroll.

Я бы ожидал, что левый столбец заполнит оставшаяся ширина, а затем переполнение для прокрутки. Однако в действительности левый столбец выталкивает правый столбец за пределы экрана.

Пример можно посмотреть здесь: https://codepen.io/benlorantfy/pen/oNXKXOe

Я ищу объяснение того, почему он так себя ведет и что я могу сделать, чтобы это исправить.

.flex-parent {
  display: flex;
  flex-direction: row;
}

.flex-child-1 {
  background-color: red;
  height: 200px;
  flex-grow: 1;
  flex-shrink: 1;
}

.nowrap-el {
  white-space: nowrap;
  width: 100%;
  overflow-x: scroll;
  background-color: grey;
}

.flex-child-2 {
  background-color: lightblue;
  height: 200px;
  width: 400px;
  flex-shrink: 0;
}

<div class="flex-parent">
  <div class="flex-child-1">
    <div class="nowrap-el">
      This should fill remaining space instead of pushing flex-child-2 off the screen. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas in augue volutpat, sagittis ante et, tincidunt mauris. Morbi vitae convallis erat, eget vulputate lacus.
      Nunc a justo aliquet, facilisis justo eget, semper velit. Nunc quis elementum tortor. Nam vestibulum aliquet nunc, id
    </div>
  </div>
  <div class="flex-child-2">This should not be shoved off screen</div>
</div>

Answer 1

Я исправил это, добавив overflow-x: hidden на flex-child-1. (Я также добавил flex-basis: 0 для хорошей меры, но я не думаю, что это что-то делает). Похоже, это говорит браузеру о соблюдении ширины и переполнения, установленных для дочерних элементов. Я не уверен, почему это работает или где в спецификации c это говорит об этом, но если кто-то знает и хочет комментировать, не стесняйтесь.

.flex-child-1 {
  background-color: red;
  height: 200px;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
  overflow-x: hidden;
}

См. Живую демонстрацию по: https://codepen.io/benlorantfy/pen/ExjqJBM