CODEWITHSUNDEEP
cssoverflow
Jacob
Jacob

Reputation: 4031

How can I prevent overflow on a div?

How can I prevent overflow on my .resourceliste div.

See fiddle: https://jsfiddle.net/rdt9fr9m/2/

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;
}
<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>

Upvotes: 0

Views: 5980

Answers (2)

user7203953
user7203953

Reputation: 

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

Add container overflow code after uninstall:

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

enter image description here

Upvotes: 1

Stickers
Stickers

Reputation: 78736

When you use percentage height, you will need to set it on every parent container. In this case fieldset element is missing that.

#resourcesDiv fieldset {
  height: 100%;
}

jsFiddle

* {
  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;
}
<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>

Upvotes: 2

Related Questions