为什么我的flex项溢出其flex容器？

Question

考虑以下示例：

.container {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: row;
  padding: 0px;
}

.left {
  display: flex;
  flex-direction: column;
}

.right {
  margin-left: 3px;
  justify-content: flex-end;
  background-color: blue;
}

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

.item {
  background-color: grey;
  min-width: 180px;
  margin: 10px;
}

.panel {
  display: flex;
  flex-direction: column;
  background-color: yellow;
  overflow-x: scroll;
}

<div class="container">
  <div class="left">
    <div class="title">
      LEFT TITLE
    </div>

    <div class="panel">
      <div class="row">
        <div class="item">
          Item 1
        </div>
        <div class="item">
          Item 2
        </div>
        <div class="item">
          Item 3
        </div>
        <div class="item">
          Item 4
        </div>
        <div class="item">
          Item 5
        </div>
      </div>
    </div>
  </div>
  <div class="right">
    RIGHT TITLE
  </div>
</div>

如您所见，panel类正将right panel推到屏幕边界之外，并且overflow-x属性未应用于panel。 / p>

为什么panel不尊重屏幕宽度并水平溢出，没有显示我的overflow-x必需的滚动条？检查我的容器中是否包含width: 100%，并希望该容器受到尊重。