无法正确控制子控件溢出

Question

我得到了以下布局：

仅供参考，这里是省略内容的实际网站：

现在红色，蓝色和橙色都应该被修复。布局中唯一应该实际改变的部分是绿色部分。我将绿色部分的所有内容都包含在一个div中，它应该能够实现这一点，但我无法弄明白。

我想要它，如果绿色溢出Y，那么Green应该负责处理溢出而不是它的父节点。但是目前父母负责溢出Y并且由于某种原因，Green负责其自身的溢出X.我不知道为什么会这样。 Green的父母有这个CSS：

15.4.2

现在，如果我在这里应用CSS规则溢出就是我得到的结果（绿色中的那个是孩子的滚动条，但右边的那个是父亲的＃s; s滚动条）：

我希望父母的滚动条消失，以便孩子负责。

我将如何实现这一目标？

以下是蓝色和橙色的CSS，以备不时之需。

补充工具栏（蓝色）得到了这个：

.render-body {
    margin-left: 200px;
    margin-bottom: 20px;
    top: 0;
    right: 0;
    bottom: 0;
    transition: margin-left ease .25s;
    width: auto;
    height: 100%;
    overflow-y: scroll;
    overflow-x: auto;
}

.render-body body {
    height: inherit;
    width: inherit;
}

页脚（橙色）得到了这个：

.context-sidebar {
    background-color: #e7e7e7;
    color: #eee;
    position: fixed;
    height: 100%;
    width: 200px;
    overflow-y: auto;
    overflow-x: hidden;
    left: 0;
    margin-bottom: 20px;
    transition: left ease .25s;
}

Red for CSS只是bootstrap类：

.layout-footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    font-weight: bold;
    font-size: 14px;
    position: fixed;
    width: 100%;
    height: 20px;
    bottom: 0;
}

Answer 1

Flexbox使这种布局变得简单。对主要父级column使用body布局，然后主要部分flex-grow填充空格，并flex以及左侧/ overflow-y: scroll右子节作为弹性儿童，绿色区域设置为body { max-height: 100vh; margin: 0; display: flex; flex-direction: column; } header { background: red; } footer { background: orange; } main { flex-grow: 1; display: flex; } aside { background: blue; flex: 0 0 300px; } article { background: green; flex: 1 0 0; overflow-y: scroll; }

＆＃13;

＆＃13;

<header>header
</header>

<main>
  <aside>aside</aside>
  <article>
    <p>foo</p><p>foo</p><p>foo</p><p>foo</p><p>foo</p><p>foo</p><p>foo</p><p>foo</p><p>foo</p><p>foo</p><p>foo</p><p>foo</p><p>foo</p><p>foo</p><p>foo</p><p>foo</p><p>foo</p><p>foo</p><p>foo</p><p>foo</p><p>foo</p><p>foo</p><p>foo</p><p>foo</p><p>foo</p><p>foo</p><p>foo</p><p>foo</p><p>foo</p><p>foo</p><p>foo</p><p>foo</p><p>foo</p><p>foo</p>
  </article>
</main>

<footer>footer
</footer>

＆＃13;

pyexcel

＆＃13;

＆＃13;

＆＃13;