css设置滚动条并显示或隐藏

看效果，没有滚动条，超出div，开发中肯定不行。

有滚动条

最后就是想隐藏滚动条

代码

有滚动条并显示

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
 </head>
 <body style="width:229px; height:203px; text-align:center; padding-top: 50px; margin-left: 480px; background-color: darkkhaki">
     <div class="outer-container" style="border:1px solid #000; background-color: #00B83F">
         <div class="inner-containe" style="width:229px; height:203px; overflow:auto;">
             <li><span >overflow10</span></li>
             <li><span >overflow11</span></li>
             <li><span >overflow12</span></li>
             <li><span >overflow13</span></li>
             <li><span >overflow14</span></li>
             <li><span >overflow15</span></li>
             <li><span >overflow16</span></li>
             <li><span >overflow17</span></li>
             <li><span >overflow18</span></li>
             <li><span >overflow19</span></li>
             <li><span >overflow10</span></li>
             <li><span >overflow11</span></li>
             <li><span >overflow12</span></li>
             <li><span >overflow13</span></li>
             <li><span >overflow14</span></li>
             <li><span >overflow15</span></li>
             <li><span >overflow16</span></li>
             <li><span >overflow17</span></li>
             <li><span >overflow18</span></li>
             <li><span >overflow19</span></li>
             <li><span >overflow10</span></li>
             <li><span >overflow11</span></li>
             <li><span >overflow12</span></li>
             <li><span >overflow13</span></li>
             <li><span >overflow14</span></li>
             <li><span >overflow15</span></li>
             <li><span >overflow16</span></li>
             <li><span >overflow17</span></li>
             <li><span >overflow18</span></li>
             <li><span >overflow19</span></li>
             <li><span >overflow10</span></li>
             <li><span >overflow11</span></li>
             <li><span >overflow12</span></li>
             <li><span >overflow13</span></li>
             <li><span >overflow14</span></li>
             <li><span >overflow15</span></li>
             <li><span >overflow16</span></li>
             <li><span >overflow17</span></li>
             <li><span >overflow18</span></li>
             <li><span >overflow19</span></li>
         </div>
     </div>

 </body>
 </html>

有滚动但是隐藏

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
     <style type="text/css">
         .outer-container{
             width: 229px;
             height: 203px;
             position: relative;
             overflow: hidden;
         }
         .inner-containe{
             position: absolute;
             left: 0;
             top: 0;
             right: -17px;
             bottom: 0;
             overflow-x: hidden;
             overflow-y: scroll;
         }
     </style>
 </head>
 <body style=" text-align:center; padding-top: 50px; margin-left: 480px; background-color: darkkhaki">
     <div class="outer-container" style="border:1px solid #000; background-color: #00B83F">
         <div class="inner-containe" >
             <li><span >overflow10</span></li>
             <li><span >overflow11</span></li>
             <li><span >overflow12</span></li>
             <li><span >overflow13</span></li>
             <li><span >overflow14</span></li>
             <li><span >overflow15</span></li>
             <li><span >overflow16</span></li>
             <li><span >overflow17</span></li>
             <li><span >overflow18</span></li>
             <li><span >overflow19</span></li>
             <li><span >overflow10</span></li>
             <li><span >overflow11</span></li>
             <li><span >overflow12</span></li>
             <li><span >overflow13</span></li>
             <li><span >overflow14</span></li>
             <li><span >overflow15</span></li>
             <li><span >overflow16</span></li>
             <li><span >overflow17</span></li>
             <li><span >overflow18</span></li>
             <li><span >overflow19</span></li>
             <li><span >overflow10</span></li>
             <li><span >overflow11</span></li>
             <li><span >overflow12</span></li>
             <li><span >overflow13</span></li>
             <li><span >overflow14</span></li>
             <li><span >overflow15</span></li>
             <li><span >overflow16</span></li>
             <li><span >overflow17</span></li>
             <li><span >overflow18</span></li>
             <li><span >overflow19</span></li>
             <li><span >overflow10</span></li>
             <li><span >overflow11</span></li>
             <li><span >overflow12</span></li>
             <li><span >overflow13</span></li>
             <li><span >overflow14</span></li>
             <li><span >overflow15</span></li>
             <li><span >overflow16</span></li>
             <li><span >overflow17</span></li>
             <li><span >overflow18</span></li>
             <li><span >overflow19</span></li>
         </div>
     </div>

 </body>
 </html>