css - 如何阻止 flexbox 子级在辅助 flex 方向上扩展父容器？

Question

如何阻止特定的 flexbox 子项在辅助 flex 方向上扩展父容器？

.my-component {
  display: flex;
}

.parent-wrapper {
  align-items: start;
  min-width: 200px;
  display: flex;
  flex-direction: column;
}

.parent-big {
  min-width: 200px;
  display: flex;
  flex-direction: column;
}

.parent {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  overflow-x: auto;
}

.child { background-color: #FFCC99; }
.child-big { background-color: #99FFCC; }

<div class="my-component">
  <div class="parent-wrapper">
    Some other parent wrapper
  </div>
  <div class="parent-wrapper">
    <div class="parent-big">
      <div class="child-big">
        Some Random Big Child 1
      </div>
      <div class="child-big">
        Some Random Big Child 2
      </div>
    </div>
    <div class="parent">
      <div class="child">
        Child 3
      </div>
      <div class="child">
        Child 4
      </div>
      <div class="child">
        Child 5
      </div>
      <div class="child">
        Child 6
      </div>
      <div class="child">
        Child 7
      </div>
      <div class="child">
        Child 8
      </div>
    </div>
  </div>
</div>

在这个例子中，我想.parent-wrapper不考虑.parent，同时也允许它基于其他孩子成长。如何停止.parent扩张.parent-wrapper？

得到

我需要

标签： cssflexbox