将背景应用到flex儿童上无法正常工作

Question

我有以下代码

.parent {
  display: flex;
  width: 100%;
  flex-direction: column;
  overflow-x: auto;
}
.child {
  display: flex;
  flex-flow: row nowrap;
  background: red;
}
.grand-child {
  flex-shrink: 0;
  display: block;
  align-items: center;
  padding: .54rem 1.05rem;
  width: 300px;
  height: 100px;
  overflow-x: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<div class="parent">
  <div class="child">
    <div class="grand-child">a</div>
    <div class="grand-child">b</div>
    <div class="grand-child">c</div>
    <div class="grand-child">d</div>
  </div>
</div>

DEMO

问题： 将背景应用于类.children时，背景不会溢出内容（在x轴上滚动时）。我只想将背景仅应用于.children类，而要保持滚动性。如果那不可能，那是什么原因？

我在回答This时遇到了这个问题。尽管我设法解决了该问题，但仍然存在该特定问题

Answer 1

这仅仅是因为flex-shrink: 0； grand-chil d类的属性。如果要在子类中对齐所有孙子，请删除该子类。

.parent {
  display: flex;
  width: 100%;
  flex-direction: column;
  overflow-x: auto;
}
.child {
  display: flex;
  flex-flow: row nowrap;
  background: red;
  width:1200px;
}
.grand-child {
  /*flex-shrink: 0;*/
  display: block;
  align-items: center;
  padding: .54rem 1.05rem;
  width: 300px;
  height: 100px;
  overflow-x: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<div class="parent">
  <div class="child">
    <div class="grand-child">a</div>
    <div class="grand-child">b</div>
    <div class="grand-child">c</div>
    <div class="grand-child">d</div>
  </div>
</div>

Answer 2

让我们检查一下该代码。

https://jsfiddle.net/2cuqL1f3/7/

css：

.child {
  background: red;
  width:100%;
  height:100px;
  overflow:scroll;
  white-space: nowrap;
}
.grand-child {

  display: inline-block;
  min-width: 300px;
  height: 100px;
  overflow-x: hidden;
}