hiding the scrollbar from the DIV

Question

I am working with div which is throwing an additional scrollbar which I don't want to have. I want my div to be of flexible width (bootstrap) and fixed height of 290px . Can someone please help me out of this ?

<div class="box">
  <atitle>This is box 2</atitle>
  <hr>
    <div class="box1">
      <p>Hello World Hello World Hello World Hello World Hello World </p>
    </div>
</div>

And the CSS is here :

.box {
  overflow: hidden;
  min-height: 290px;
  border: 1px solid #383737;
  margin-bottom: 30px;
  background-color: #3d3d3d;
}

.box1 {
    overflow: auto;
    height: 290px;
}

Answer 1

I think this might help you:

.box1{
    width: 100%;
    height: 99%;
    border: 1px solid blue;
    overflow: auto;
    padding-right: 15px;
}

.box{
    height: 99%;
    border: 1px solid red;
    overflow:hidden;
}