子元素宽高大于父元素

这篇文章主要讨论子元素宽高度超出父元素宽高度的情况。

• 包裹的盒子（父元素）已经规定好宽度时，若被包裹的元素的总宽度大于父元素宽度，那么被包裹的元素的宽度=父元素宽度 / 被包裹的元素的个数。

<style>
    *{
        margin: 0;
        padding: 0;
    }
    .flex{
            width: 240px;
            height: 200px;
            display: flex;
            background-color: #8c8c8c;
        }
    .flex div{
            width: 50px;
            height: 50px;
            background-color: #a0c8ff;
        }
</style>
    
<div class="flex">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

无边框.png
无边框2.png

• 包裹的盒子（父元素）已经规定好宽度时，若被包裹的元素的总宽度大于父元素宽度，且有边框时，那么被包裹的元素的宽度=父元素宽度 / 被包裹的元素的个数 - 边框宽度 * 2

<style>
    *{
        margin: 0;
        padding: 0;
    }
    .flex{
            width: 240px;
            height: 200px;
            display: flex;
            background-color: #8c8c8c;
        }
    .flex div{
            border: 2px solid #8c8c8c;
            width: 50px;
            height: 50px;
            background-color: #a0c8ff;
        }
</style>
    
<div class="flex">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

有边框.png
有边框2.png