body,

html {

    width: 100%;

    height: 100%;

    display: flex;

    // background: conic-gradient(

    //     #fff,

    //     #fff 90deg,

    //     #ddd 90deg,

    //     #ddd 180deg,

    //     #fff 180deg,

    //     #fff 270deg,

    //     #ddd 270deg

    // );

    // background-size: 50px 50px;

}

.g-container {

    container-type: size;

    container-name: container;

}

.g-container2,

.g-container {

    position: relative;

    margin: auto;

    width: 300px;

    height: 200px;

    padding: 10px;

    line-height: 2;

    background: #999;

    color: #fff;

    text-align: justify;

    border: 5px solid #000;

    resize: vertical;

    overflow: hidden;

​

    .g-content {

        width: 100%;

        height: 100%;

    }

​

    .g-content::before {

        content: "↑";

        font-size: 30px;

        cursor: pointer;

        position: absolute;

        bottom: 0px;

        left: 50%;

        transform: translate(-50%, 0);

        transition: .3s;

    }

}

​

.g-container2 {

    .g-content::before {

        bottom: clamp(-9999px, calc(calc(100% - 260px) * 100000), 0px);

        // bottom: calc(100% - 280px);

        // bottom: clamp(-99999px, calc(100% - 260px), 10px);

    }

}

@container container (height <= 230px) {

    .g-content::before {

        opacity: 0;

    }

}

​