将背景应用于 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-child 类上的属性。如果你想在子类中对齐所有孙子，请删除它。

.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;
}