爲什麼水平滾動flexbox被切斷？

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>