<style> .parent { display: flex; padding: 0px 5px; width: 600px; height: 200px; background: #ccc; } .children { margin: 10px 10px; 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); 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>
来源地址:https://blog.csdn.net/qq_44161722/article/details/132577395