Having trouble with the children of a flex container not taking full width. I want the content to use "flex: 1 0 216px" and have a scroll bar appear when necessary for overflow-x. However, the ".row" div isn't reaching the edge of its parent ".container", causing background color and border issues. See simplified code below. Thanks!
.container {
height: 100%;
background-color: lightgray;
overflow-x: auto;
}
.row {
background: lightyellow;
min-height: 48px;
padding-top: 12px;
padding-bottom: 12px;
border-bottom: 1px solid gray;
display: flex;
align-items: center;
flex-basis: 100%;
width: 100%;
}
.content {
flex: 1 0 216px;
}<div class="container">
<div class="row">
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
</div>
<div class="row">
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
</div>
<div class="row">
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
</div>
</div>