孩子隐藏在父母之外，显示：内联块和溢出：自动答案

【问题标题】：Child hidden outside parent with display:inline-blox and overflow: auto孩子隐藏在父母之外，显示：内联块和溢出：自动
【发布时间】：2021-03-18 16:48:43
【问题描述】：

我有一些问题，最后一个孩子/最后一个孩子的边距隐藏在页面之外/它是父母，而父母有最大高度：-webkit-fill-available;高度：自动；显示：内联块；和溢出：auto，见https://jsfiddle.net/andreasjj/ok9hqgxv/2/

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        body, html {
            font-size: 16px;
            margin: 0;
            padding: 0;
        }
        body {
            min-height: 100vh;
            height: 100vh;
            display: flex;
            flex-direction: column;
        }
        #root {
            height: inherit;
            min-height: inherit;
            overflow: hidden;
        }
        #wrapper {
            display: flex;
            flex-direction: column;
            height: inherit;
            min-height: inherit;
            width: inherit;
        }
        #header {
            display: flex;
            flex-direction: row;
            align-items: center;
            min-height: 50px;
            width: inherit;
            background-color: #f8f8f8;
        }
        #container {
            display: flex;
            flex-direction: row;
            width: inherit;
            height: inherit;
        }
        #content {
            height: inherit;
            width: 100%;
            overflow: hidden;
        }
        #box {
            display: flex;
            -webkit-box-align: center;
            align-items: center;
            -webkit-box-pack: center;
            justify-content: center;
            height: inherit;
            width: inherit;
        }
        #box-content {
            max-height: -webkit-fill-available;
            height: auto;
            overflow: auto;
            display: inline-block;
            padding: 0.75rem;
            width: calc(100vw - 1.0rem);
            max-width: 900px;
        }
        .module {
            background-color: black;
            border: 1px solid #e9e9e9;
            padding: 1.0rem;
            margin-bottom: 3rem;
            width: 541px;
            height: 461px;
        }
        .module:first-child {
            margin-top: 3rem;
        }
    </style>
</head>
<body>
    <div id="root">
        <div id="wrapper">
            <div id="header"></div>
            <div id="container">
                <section id="content">
                    <div id="box">
                        <div id="box-content">
                            <div class="module"></div>
                            <div class="module"></div>
                        </div>
                    </div>
                </section>
            </div>
        </div>
    </div>
</body>
</html>

最后一个黑框缺少大部分隐藏的边距（如果删除边距，框本身的一部分将被隐藏）。

除了显示值不同之外，我还尝试更改不同祖先的高度、最大高度。但似乎没有任何效果。有什么想法吗？

html 的结构可能看起来有点奇怪，但这是从 react 应用程序中提取的 html 和 css，所以我想保持结构有点相似，以免破坏整个东西。

【问题讨论】：

标签： html css

【解决方案1】：

我不确定我是否完全理解您的问题，但我总是使用以下代码来开始我的 CSS 脚本：

* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}

* 表示“选择所有内容”，并且框大小可确保所有额外内容（如边距和边框）都包含在对象的大小中。
https://www.w3schools.com/css/css3_box-sizing.asp

希望它对你有用！

【讨论】：