Html 具有纯css的可调整大小的div_Html_Css

Html 具有纯css的可调整大小的div

html css

Html 具有纯css的可调整大小的div,html,css,Html,Css,我想用纯css和html实现可调整大小的div（仅限）。这是我的示例代码： <html> <head> <link type="text/css" rel="stylesheet" href="./css/main.css" /> </head> <body> <article> <section class="le

我想用纯css和html实现可调整大小的div（仅限）。
这是我的示例代码：

<html>
<head>
    <link type="text/css" rel="stylesheet" href="./css/main.css" />
</head>
<body>
    <article>
        <section class="left">Left Side</section>
        <section class="center">Center</section>
        <section class="right">Right Side</section>
    </article>
</body>
</html>

如何设置

右侧

部分的样式以填充

中心

部分右侧和右侧屏幕之间的区域？

将列结构更改为

网格模板列：auto auto 1fr

正文{
保证金：0；
填充：0；
颜色：白色；
}
文章{
背景颜色：黄色；
宽度：100%；
身高：100%；
显示：网格；
网格模板列：自动1fr；
证明内容：开始；
}
文章部分{
背景色：#2C2C；
}
文章左{
调整大小：水平；
溢出：自动；
}
文章中心{
右边框：1px实心rgba（1341341340.255）；
左边框：1px实心rgba（1341341340.255）；
调整大小：水平；
溢出：自动；
背景：绿色；
}
文章,对{
背景：红色；
}

左侧
居中
右侧

body {
    margin: 0;
    padding: 0;
    color: white;
}

article {
    background-color: yellow;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: auto auto auto;
    justify-content: start;
    section {
        background-color: #2c2c2c;
    }
    .left {
        resize: horizontal;
        overflow: auto;
    }
    .center {
        border-right: 1px solid rgba(134, 134, 134, 0.255);
        border-left: 1px solid rgba(134, 134, 134, 0.255);
        resize: horizontal;
        overflow: auto;
    }
    .right {
        // How can fix this ?!
    }
}