如何在增加右 div 的子元素的大小时减少左 div 元素的宽度？

Question

我使用flex box 将以下 UI 安排为左右面板。 右侧面板元素的子元素使用white-space: nowrap; css 属性垂直排列。

当我增加右侧面板子元素（“comps”）的宽度时，左侧面板的宽度会减小，而不是在右侧面板中显示垂直滚动条。 我该如何解决这个问题？

（添加两个按钮用于增加子元素宽度和重置） code pen snippet

$(function(){

      $('#inc-width').click(function(){

        $('#inner-div').width($('#inner-div').width() * 2);
      });

      $('#reset-width').click(function () {

        $('#inner-div').width(1000);
      })
    })

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

.left {
  width: 20em;
  height: 40em;
  border: 1px solid;
}

.right {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.inner-wrap {
  white-space: nowrap;
  padding: 10px 0;
  background: green;
  width: 100%;
  flex: 1;
  height: 100%;
  overflow: auto;
}

.inner {
  display: inline-block;
  width: 1000px;
  height: 250px;
  background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
    <button id="inc-width">Increase child element width</button>
    <button id="reset-width">RESET child element width</button>
  </div>

<div class="parent">

    <div class="left">
      LEFT PANAL
    </div>

    <div class="right">

      <div style="flex: 1;">
        <div class="inner-wrap">
          <div class="inner" id="inner-div"></div>
          <!-- <div class="inner"></div>
          <div class="inner"></div> -->
        </div>

      </div>

    </div>

  </div>

Answer 1

您可以使用具有特定宽度的 flex-basis，也可以使用其他容器 flex-basis auto。 https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis