使用calc()调整元素高度或宽度

<style>
    .parent { 
        display: flex;
        padding: 0px 5px;
        width: 600px;
        height: 200px;
        background: #ccc;
    }
    .children { 
        margin: 10px 10px;
         /* 减去padding和margin */
        height: calc(100% - 20px);
        width: calc(100% - 30px);
        background: skyblue;
    }
 style>

 <div class="parent">
    <div class="children">11div>
    <div class="children">11div>
    <div class="children">11div>
 div>

在上面增加一个盒子，发现刚才的方块多出去了

<style>
        .parent { 
            padding: 0px 5px;
            width: 600px;
            height: 200px;
            background: #ccc;
        }
        .top{
            width: 100%;
            height: 45px;
            background: greenyellow;
        }
        .children-box {
            display: flex;
            height: 100%;
        }
        .children { 
            margin: 10px 10px;
            height: calc(100% - 65px); /* 减去margin的同时减去其它元素的高度 */
            width: calc(100% - 30px);
            background: skyblue;
        }
    style>

    <div class="parent">
        <div class="top">222div>
        <div class="children-box">
            <div class="children">11div>
            <div class="children">11div>
            <div class="children">11div>
        div>
    div>