如何防止div溢出？

Question

如何阻止overflow div上的.resourceliste。

请参阅小提琴：https://jsfiddle.net/rdt9fr9m/2/

＆＃13;

＆＃13;

body,
html {
  height: 100%;
}
#smsTemplatesHelper {
  float: left;
  height: calc(100% - 10px);
  border: 1px solid green;
}
#resourcesDiv {
  border: 2px solid red;
  height: calc(100% - 280px);
}
.resourcesButtonDiv {
  bottom: 0;
  border: 2px solid yellow;
}
#resourcenliste {
  max-height: 100%;
  overflow: scroll;
}
#helpDiv {
  height: 280px;
  border: 1px solid blue;
}

＆＃13;

<div id="smsTemplatesHelper">
  <div id="helpDiv"></div>
  <div id="resourcesDiv">
    <fieldset>
      <legend>Configure resources</legend>
      <div id="resourcenliste">
        <p>6666</p>
        <p>6666</p>
        <p>6666</p>
        <p>6666</p>
        <p>6666</p>
        <p>6666</p>
        <p>6666</p>
        <p>6666</p>
        <p>6666</p>
        <p>6666</p>
        <p>6666</p>
        <p>6666</p>
        <p>6666</p>
        <p>6666</p>
        <p>6666</p>
        <p>6666</p>
        <p>6666</p>
        <p>6666</p>
        <p>6666</p>
        <p>6666</p>
        <p>6666</p>
        <p>6666</p>
        <p>6666</p>
        <p>6666</p>
        <p>6666</p>
        <p>6666</p>
        <p>6666</p>
        <p>6666</p>
        <p>6666</p>
      </div>
    </fieldset>
    <div id="resourcesButtonDiv">btn1 btn2</div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

使用百分比高度时，需要在每个父容器上设置它。在这种情况下，fieldset元素缺少。

#resourcesDiv fieldset {
  height: 100%;
}

<强> jsFiddle

＆＃13;

＆＃13;

* {
  box-sizing: border-box;
}
body,
html {
  height: 100%;
}
#smsTemplatesHelper {
  float: left;
  height: calc(100% - 10px);
  border: 1px solid green;
}
#resourcesDiv {
  border: 1px solid red;
  height: calc(100% - 280px);
}
#resourcesDiv fieldset {
  height: 100%;
}
.resourcesButtonDiv {
  border: 1px solid yellow;
}
#resourcenliste {
  max-height: 100%;
  overflow: scroll;
}
#helpDiv {
  height: 280px;
  border: 1px solid blue;
}

＆＃13;

<div id="smsTemplatesHelper">
  <div id="helpDiv"></div>
  <div id="resourcesDiv">
    <fieldset>
      <legend>Configure resources</legend>
      <div id="resourcenliste">
        <p>6666</p>
        <p>6666</p>
        <p>6666</p>
        <p>6666</p>
        <p>6666</p>
        <p>6666</p>
        <p>6666</p>
        <p>6666</p>
        <p>6666</p>
        <p>6666</p>
        <p>6666</p>
        <p>6666</p>
        <p>6666</p>
        <p>6666</p>
        <p>6666</p>
        <p>6666</p>
        <p>6666</p>
        <p>6666</p>
        <p>6666</p>
        <p>6666</p>
        <p>6666</p>
        <p>6666</p>
        <p>6666</p>
        <p>6666</p>
        <p>6666</p>
        <p>6666</p>
        <p>6666</p>
        <p>6666</p>
        <p>6666</p>
      </div>
    </fieldset>
    <div id="resourcesButtonDiv">btn1 btn2</div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

#resourcenliste {
   max-height:100%;
   overflow:scroll // -- remove
}

卸载后添加容器溢出代码：

#resourcesDiv {
  border:2px solid red;
  height: calc(100% - 280px);
  overflow: scroll
}