为什么.box div的width超过500，就看不到我给.box设置的底色了？

<style type="text/css">

    .box {

        width:800px;

        background: blue;

        display: flex;

        justify-content:flex-end;

    }

    .box div {

        width: 500px;

        height: 500px;

    }

    .box1 {

        background: red;

    }

    .box2 {

        background: orange;

    }

    .box3 {

        background: green;

    }

    </style>