Question

我正在尝试将两个 div 元素包装在外部 main 元素内。

我希望内部元素（第一框和第二框）占用完整的宽度（即 100 ％）作为其父项（包装容器）。

但是，问题在于，当我以百分比设置框的宽度值时，它将打破其父容器的。

除了将 width设置为auto 之外，我不确定如何解决此问题。（请参阅框一样式）。

    body{
        background-color: lightblue; 
        font-size: 24px;
        }
    .item-wrap{
        border: 3px solid red;
        max-width: 180px;
        height: 250px;
        padding:8px;
        }
    #box-one{
        background-color: skyblue; 
        width: auto; /* not sure why 100% cause it to overflow x container */
        height: 140px;
        border: 2px solid orange;
        }
    #box-two{
        border: 3px solid green;
        width: 100%;
        height: 110px;
        background-color:tomato;
        padding: 10px 8px;
        }

     <body>
        <main class="item-wrap">
            <div id="box-one">BOX ONE</div>
            
            <div id="box-two">BOX TWO</div>
        </main>
    </body>

限制元素（子元素）溢出容器（父元素）的宽度

0 个答案: