CODEWITHSUNDEEP
javascripthtmlcss
Bast
Bast

Reputation: 92

Overflow:auto not working even with height set

While making a website I built an exception holder to the side that stores every exception thrown.

I want to make it scroll as opposed to it expanding the webpage if too many things go wrong.

I am using CSS and overflow:auto to alter the #error element.

The website 

#error {
  color:red;
  display:table;
  border:1px solid black;
  border-color:black;
  height:750px;
  width:10em;
  overflow:auto;
  white-space:nowrap;
}
#important{
  vertical-align:top;
  border-collapse:separate;
}
<table>
  <tr>
    <td id='error'>
      <div>
        <center>Errors:</center>
      </div>
    </td>
    <td id='important'>
      Everything here is important. Everything. Please wait while we load.
    </td>
  </tr>
</table>

Upvotes: 0

Views: 130

Answers (1)

genichm
genichm

Reputation: 535

Remove display:table; from #error and move id='error' to nested div. It will fix the problem.

#error {
  color: red;
  border: 1px solid black;
  border-color: black;
  height: 10px;
  width: 10em;
  overflow: auto;
  white-space: nowrap;
}
#important {
  vertical-align: top;
  border-collapse: separate;
}
<table>
  <tr>
    <td>
      <div id='error'>
        <center>
          Errors:
          <br/><br/><br/><br/>
          AAA
        </center>
      </div>
    </td>
    <td id='important'>
      Everything here is important. Everything. Please wait while we load.
    </td>
  </tr>
</table>

Upvotes: 1

Related Questions