HTML Element Style How to - Make div scrollable

Question

We would like to know how to make div scrollable.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
.SearchResults {<!--  w w  w .  j a v a2 s .  co m-->
  margin: 0px auto;
  width: 100%;
}

.SearchResultsContainer {
  border: 2px solid #EEE;
  margin: 0px auto;
  width: 54%;
  max-height: 150px;
  overflow-y: auto;
  padding-right: 4px;
}
</style>
</head>
<body>
  <div class="SearchResultsContainer">
    <div class="SearchResults">
      test 1<br /> test 2<br /> test 3<br /> test 4<br /> test 5<br />
      test 6<br /> test 7<br /> test 8<br /> test 9<br /> test 10<br />
      test 11<br />
    </div>
  </div>
</body>
</html>

The code above is rendered as follows: