flex佈局：子子元素過大撐開了設定flex：1的子元素的解決方案

時間 2019-11-18

標籤 flex 佈局元素過大撐開設定解決方案欄目 Flex 简体版

原文原文鏈接

讓p3脫離文旦流，不影響外層flex佈局：
- p2設置相對定位，p3設置絕對定位
設置p2的overflow不爲visible,構造BFC

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .wrapper{
        display: flex;
        width: 1000px;
        height: 300px;
    }
    .p1{
        flex: 2;
        border: 1px solid red;
    }
    .p2{
        border: 1px solid red;
        flex: 1;
        display: block;
        overflow: scroll;
    }
    .p3{
        width: 700px;
        height: 200px;
    }
</style>
<body>
<div class="wrapper">
    <div class="p1"></div>
    <div class="p2">
            <div class="p3">256</div>
    </div>
</div>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。