Question

这是一个简单的flexbox模板，我正在尝试制作完整的高度布局height: 100vh;，该模板可在Chrome和IE11中使用，但不能在Firefox中使用。

类为target-cell的元素具有overflow: auto;属性。据我了解，它应该创建滚动并适合父级，但是在Firefox中，它不能以这种方式工作，并且会超出父级而不滚动。

是否有任何防止这种行为的解决方法？

* {
    margin: 0;
    padding: 0;
}

body {
    font-size: 30pt;
}

.main_container {
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.menu{
    min-height: fit-content;
}

.table_container {
    height: auto;
    background-color: antiquewhite;
    display: inline-flex;   
}

.cell {
    padding: 10px;
    border: 1px solid black;
}

.column {
    display: flex;
    flex-direction: column;
    background-color: aqua;
}

.row {
    display: flex;
    flex-direction: row;
}

.scroll {
    overflow: auto;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>

<body>
    <div class="main_container column">
        <div class="menu row">My menu</div>
        <div class="table_container row">
                <div class="cell scroll target-cell">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ratione impedit
                    deleniti
                    a beatae quibusdam, inventore tempore vero ea laboriosam ipsam dolorum, dignissimos eaque omnis
                    sunt
                    fugit iste suscipit esse quis perferendis atque libero, blanditiis quam alias eligendi. Voluptas,
                    dolores provident. Alias esse ab ad corporis ut aliquid excepturi vel perferendis. Officia
                    voluptatum
                    aut reprehenderit adipisci hic quaerat cum incidunt quidem aliquid placeat? Tempora facilis numquam
                    illo ipsa ad voluptate repellendus? Repellat voluptates, atque perspiciatis, blanditiis deserunt
                    magnam
                    qui debitis praesentium accusamus sit autem exercitationem itaque vel dolor necessitatibus iusto
                    facere. Minus placeat eligendi illo facilis. Quo dolore tempora a? Libero?Lorem, ipsum dolor sit
                    amet
                    consectetur adipisicing elit. Aliquid dolores assumenda, ipsa doloribus sed recusandae deserunt.
                    Laborum ad est cupiditate commodi omnis quaerat saepe laboriosam iusto facilis quidem sunt deserunt
                    obcaecati atque nulla id, neque vel eius porro tempore nesciunt. Vel repudiandae velit corporis
                    alias
                    libero eos laboriosam voluptates accusamus, tempore ipsa numquam odit hic sit omnis expedita sed
                    quia
                    mollitia beatae at vero minus molestiae saepe? Labore earum ea rem iste facere sint id ad mollitia
                    incidunt ipsam unde cupiditate perspiciatis tempore ullam aut harum dolorem illum magni corporis
                    nesciunt accusantium, nam autem ex? Quas nulla repellat dignissimos fugit.Lorem ipsum dolor sit
                    amet.</div>
                <div class="cell">Assumenda ipsa voluptatibus sapiente iste.</div>
                <div class="cell">Fuga, deleniti. Fugiat, qui illum!</div>
                <div class="cell">Quaerat asperiores ullam libero sequi.</div>
                <div class="cell">Sequi provident saepe iusto molestias.</div>
        </div>
    </div>

</body>

</html>

如果使用flex容器，Firefox不会创建滚动

0 个答案: