flex中justify-content: center导致的子元素显示不完全解决

.content {
    display: flex;
    height: 200px;
    
}

.parent {
    display: flex;
    justify-content: center;
    width: 800px;
    margin-left: 100px;
    border: 1px solid green;
    overflow: auto;
}

.flex-item {
    flex: 0 0 200px;
    width: 200px;
    height: 180px;
    border: 1px solid red;
}

<div class="parent">
    <div class="content">
        <div class="flex-item"></div>
        <div class="flex-item"></div>
    </div>
</div>