强制伸缩项目放入伸缩容器中，即使内容溢出

Question

我有一个Flexbox，其中包含两个flex项目。一个弹性项目包含一个使用white-space: pre保留其原始空格的元素。内容可以很宽。

我想在flexbox上设置最大宽度，并确保flex项目适合该宽度。我在宽元素上设置了overflow-x: auto，希望它会显示一个滚动条。

但是，带有white-space: pre的元素没有滚动条：它最终将flex-item的宽度扩展到了flexbox的最大宽度之外。

请参阅下面的演示：我希望第一个flex-item（绿色框）占据flexbox的80％（黑色边框），我希望第二个flex-item（蓝色框）占据其余的20％ ％。为此，我希望Wide元素（灰色框）在太宽而无法容纳时自动获得滚动条。

相反，由于元素较宽，绿色的flex-item大大超出了flexbox。

#flex-item {
  display: flex;
  border: 1px #000 solid;
  max-width: 400px;
  padding: 10px;
}
    
#left {
  background: #ccffcc;
  flex-basis: 80%;
}
    
#wide {
  overflow-x: auto;
  max-width: 100%;
  background: #eee;
  white-space: pre;
}
    
#right {
  background: #ccccff;
  flex-basis: 20%;
}

<div id='flex-item'>
  <div id='left'>
    <p>Normal text</p>
    <div id='wide'>
      This is some wide content. I wish this box had a horizontal scrollbar so that it wouldn't expand its parent flex-item.
    </div>
    <p>Normal text</p>
  </div>
  <div id='right'>
    <ul>
      <li>asdf</li>
      <li>asdf</li>
      <li>asdf</li>
      <li>asdf</li>
      <li>asdf</li>
      <li>asdf</li> 
    </ul>
  </div>
</div>