How div expand with content?

How these divs expand with content? Scroll is working but i cant hide the scroll. So can u help me?

t<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <link rel="stylesheet" type="text/css" href="../Kişisel Blog/style.css">
    <link href="https://fonts.googleapis.com/css?family=Karla" rel="stylesheet">
    <meta charset="utf-8">
    <title></title>
<style>

  body{
  margin: 0;
  padding: 0;
  background-color: #132d2c;
  background-image: url(best-football-moments.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  font-family: 'Karla', sans-serif;


}

ul{
  margin:0;
  padding: 5px 0px 0px 0px;
  width: 100%;
  list-style-type: none;
  position: absolute;
  bottom: 0px;
  background-color: #163534;

}
li{
  float: left;

}
li a{
    display: block;
    text-align: center;
    text-decoration: none;
    padding-right: 15px;
    color: #f7fff7;
    margin: 1px;

}
a:visited { text-decoration: none;
}

.wrap{
  margin: auto;
  height: auto;
  width: 500px;
  background-color: #b9c4b6;
  position: relative;
  overflow: hidden;

}
.container{

  margin: auto;
  height: 100vh;
  width: 480px;
  background-color: #163534;
  overflow-y: scroll;




}
.banner{
  margin: auto;
  height: 25%;
  width: 95%;
  background-color: green;
  background-size: cover;
  background-position: center;
  position: relative;
}
.contain{
  margin: auto;
  margin-top: 13%;
  height: 65vh ;
  width: 98%;
  font-size: 15px;
  color: #f7fff7;
}
img{
  margin-top: 13px;
  max-width: 100%;
  height: auto;
}


</style>
  </head>
  <body>
            <div class="wrap">
              <div class="container">
                  <div class="banner">
                    <ul>
                      <li><a href="#home">Home</a></li>
                      <li><a href="#news">About</a></li>
                      <li><a href="#contact">Who?</a></li>
                    </ul>
                  </div>
                <div class="contain">
                    <article class="ilk">
                      <h2>Kontrollü kaos, yaratıcısına geri döndü</h2>
                      Borussia Dortmund’un Bayern Münih ile yakın dönemdeki karşılaşmaları kendisi açısından hiç de parlak değildi. Son 15 maçın sadece ikisini kazanabilen Dortmund, mart ayındaki son karşılaşmada da Bayern’e 6-0 mağlup olmuş, üstelik eski golcüsü Robert Lewandowski ise hat-trick yapmıştı.
                      Lewandowski’nin Dortmund’dan ayrılıp Bayern’e gideceğini açıkladığı günden tam beş yıl sonra bir daha karşılaşacaklardı. Ama bu defa Dortmund, çok daha iyi durumdaydı ve bunun Bayern yöneticileri de farkındaydı. Başkan Uli Hoeness, maç öncesinde yaptığı açıklamada, “Dortmund’a uzun süre sonra ilk defa favori olarak gitmiyoruz,” demişti.

                  <img src="bvb.jpg" alt="">
                  Bayern, Signal Iduna Park’a en son bu kadar mütevazı bir şekilde Nisan 2012’de gitmiş ve Jürgen Klopp’un Dortmund’u maçı 1-0 kazanarak ligin bitmesine dört hafta kala puan farkını altıya çıkarmış, ardından da Bundesliga’yı üst üste ikinci defa şampiyon bitirmişti.

Raphael Honigstein’ın ESPN' deki maç öncesi yazısında belirttiği gibi, beş buçuk yıl önceki o maç, bugünle parallellikler içeriyordu. Şu anki Bayern’in omuriliğini oluşturan Manuel Neuer, Jerome Boateng, Franck Ribery, Thomas Müller ve Arjen Robben, o maçta da on birdeydi. Şimdi yaşlanan kadro, o zaman daha gençti. Ama o zaman da Dortmund taktik açıdan daha gelişmiş bir takımdı. Bayern, aynı şimdiki gibi kanat oyuncularının bire birdeki becerilerine bağımlı bir takımken, Dortmund nefes kesen bir hücum futbolu oynuyordu.
                  </article>
                </div>
              </div>
            </div>

  </body>
</html>

Apply overflow-y: auto; to your class .container so that the scroll bar only appears when the content overflows the container.