html, body {

    width: 100%;

    height: 100%;

    display: flex;

}

​

.wrap {

    margin: auto;

    width: 500px;

    resize: horizontal;

    border: 2px solid #ddd;

    overflow: auto;

}

​

.g-container {

    display: flex;

    flex-wrap: nowrap;

​

    .child {

        flex-shrink: 0;

        width: 200px;

        height: 100px;

        line-height: 100px;

        color: #fff;

        font-size: 24px;

        background: deeppink;

        text-align: center;

    }

    p {

        height: 100px;

        padding: 0 10px;

        font-size: 16px;

        line-height: 2;

    }

}

​

.wrap {

  /* CSS CONTAINER */

  container-type: inline-size;

  container-name: wrap;

}

​

@container wrap (max-width: 400px) {

    .g-container {

        flex-wrap: wrap;

        flex-direction: column;

    }

    .g-container .child {

        width: 100%;

    }

}

​

// @media screen and (max-width: 500px){

//     .g-container {

//         flex-wrap: wrap;

//         flex-direction: column;

//     }

//     .g-container .child {

//         width: 100%;

//     }

// }