为什么水平滚动弹性箱会被切断？

Question

使用flexbox我有一个水平滚动div，其中div内的内容比屏幕宽。但是当滚动到右边时，内容会被保留，但背景和边框会被切掉。无法理解：

html {
  padding: 0;
  margin: 0;
}
body {
  background: #aaa;
  display: flex;
  flex-direction: row;
  margin: 0;
  overflow: hidden;
}

.data-grid {
  flex: 1;
  display: flex;
  border: 1px solid blue;
  flex-direction: column;
  overflow: hidden;
}
.data-grid--scrollwrap {
  height: 500px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  flex: 1;
}
  
.data-grid--header {
  flex: 0 0 50px;
  background: #ccc;
  flex-direction: row;
  display: flex;
}
.header {
  flex: 0 0 400px;
  border-right: 2px solid red;
}
.data-grid--content {
  flex: 1;
  background: gold;
  height: 200px;
}

<div class="data-grid">
  <div class="data-grid--scrollwrap">
    <div class="data-grid--header">
      <div class="header">1</div>
      <div class="header">2</div>
      <div class="header">3</div>
    </div>
    <div class="data-grid--content">
      d
    </div>
  </div>
</div>

Answer 1

您可以将width: 1206px;添加到.data-grid--content：

html {
  padding: 0;
  margin: 0;
}
body {
  background: #aaa;
  display: flex;
  flex-direction: row;
  margin: 0;
  overflow: hidden;
}

.data-grid {
  flex: 1;
  display: flex;
  border: 1px solid blue;
  flex-direction: column;
  overflow: hidden;
}
.data-grid--scrollwrap {
  height: 500px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  flex: 1;
}
  
.data-grid--header {
  flex: 0 0 50px;
  background: #ccc;
  flex-direction: row;
  display: flex;
}
.header {
  flex: 0 0 400px;
  border-right: 2px solid red;
}
.data-grid--content {
  background: gold;
  height: 200px;
  flex: 1;
  width: 1206px;
}

<div class="data-grid">
  <div class="data-grid--scrollwrap">
    <div class="data-grid--header">
      <div class="header">1</div>
      <div class="header">2</div>
      <div class="header">3</div>
    </div>
    <div class="data-grid--content">
      d
    </div>
  </div>
</div>