Can't get the container to expand according to its content-CodePudding

I did try a few suggestions that I found online but none of them worked. I tried to fix the footer at the bottom using Flexbox layout but it didn't work, when I add more cards they overflow and go past the footer. I also followed this answer and added the two properties to my main page, but the problem is card-container does not expand to fit the content (it display has to flex) and only the main div (for whole page) does.

Do you have any suggestions or workarounds for this issue?

/* RESET */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background: #ebecf0;
  font-family: "Open Sans", sans-serif;
  min-height: 100vh;
}
body a {
  text-decoration: none;
  color: #172b4d;
}
body h1 {
  font-family: "Song Myung", serif;
}
/* DEFAULT STYLE */
:root {
  font-size: 16px;
  --card-img-height: 200px;
}
.card-container {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  transition: all 200ms ease-in-out;
}
.card {
  align-self: flex-start;
  position: relative;
  width: 325px;
  min-width: 275px;
  margin: 1.25rem 0.75rem;
  background: white;
  transition: all 300ms ease-in-out;
}
.card .card-img {
  visibility: hidden;
  width: 100%;
  height: var(--card-img-height);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.card .card-img-hovered {
  --card-img-hovered-overlay: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
  transition: all 350ms ease-in-out;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  width: 100%;
  position: absolute;
  height: var(--card-img-height);
  top: 0;
}
.card .card-info {
  position: relative;
  padding: 0.75rem 1.25rem;
  transition: all 200ms ease-in-out;
}
.card .card-info .card-about {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 0;
  transition: all 200ms ease-in-out;
}
.card .card-info .card-about .card-tag {
  width: 60px;
  max-width: 100px;
  padding: 0.2rem 0.5rem;
  font-size: 12px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px;
  background: #505f79;
  color: #fff;
}
.card .card-info .card-about .card-tag.tag-news {
  background: #36b37e;
}
.card .card-info .card-about .card-tag.tag-deals {
  background: #ffab00;
}
.card .card-info .card-about .card-tag.tag-politics {
  width: 71px;
  background: #ff5630;
}
.card .card-info .card-title {
  z-index: 10;
  font-size: 1.5rem;
  padding-bottom: 0.75rem;
  transition: all 350ms ease-in-out;
}
.card .card-info .card-creator {
  padding-bottom: 0.75rem;
  transition: all 250ms ease-in-out;
}
.card:hover {
  cursor: pointer;
  box-shadow: 0px 15px 35px rgba(227, 252, 239, 0.1), 0px 5px 15px rgba(0, 0, 0, 0.07);
  transform: scale(1.025);
}
.card:hover .card-img-hovered {
  --card-img-hovered-overlay: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.65));
  height: 100%;
}
.card:hover .card-about, .card:hover .card-creator {
  opacity: 0;
}
.card:hover .card-info {
  background-color: transparent;
}
.card:hover .card-title {
  color: #ebecf0;
  transform: translate(0, 40px);
}
.card-1 .card-img, .card-1 .card-img-hovered {
  background-image: var(--card-img-hovered-overlay), url(https://source.unsplash.com/Qm_n6aoYzDs);
}
.card-2 .card-img, .card-2 .card-img-hovered {
  background-image: var(--card-img-hovered-overlay), url(https://source.unsplash.com/C-v1p2DTakA);
}
.card-3 .card-img, .card-3 .card-img-hovered {
  background-image: var(--card-img-hovered-overlay), url(https://source.unsplash.com/V0L1LH7qWOQ);
}
.card-4 .card-img, .card-4 .card-img-hovered {
  background-image: var(--card-img-hovered-overlay), url(https://source.unsplash.com/zAi2Is48-MA);
}


.page-footer{
  height: 3rem;
  background: #cddc39;
  color: var(--primary-900);
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: var(--letterSpacing);
}

.page-footer p{
  font-size: 0.8rem;
  margin-bottom: 0;

}

.footer-logo, .page-footer a{
  color: #0f5132;

}

.columned-footer {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding-inline-start: 0.1rem;
  background-color: rgb(70, 66, 66);
  height: 8rem;
  color: rgb(243, 240, 235);
  width: 100%;
}

.social {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(70, 66, 66);
  height: 5rem;
  border-top: 0.1rem solid;
  border-top-color: rgb(102, 99, 99);
}

.social_footer_ul { 
  display:table;
  margin:10px auto 0 auto;
  list-style-type:none; 
  padding: 10px 15px;
}

.social_footer_ul li { 
  font-size: 30px;
  padding-left:20px; 
  float:left; 
}

.social_footer_ul li a { 
  padding:15px;
  color: #e2e0ff;

}

.social_footer_ul li a:hover { 
  opacity: 0.2px;
  color: #cddc39;
}

.social_footer_ul li i {  
  width:20px; 
  height:20px; 
  text-align:center;
}

.footer-container {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
    display: grid;
    gap: 10rem;
    grid-template-columns: 1fr 1fr;
    padding-inline-start: 2rem;
}

.line {
  height: 2px;
  width: 80px;
  background-color: #cddc39;
  margin: 3px 0px;
  padding: 0px;
}

.streak {
  height:2px;
  width: 300px;
  background-color: #acb930;
  display: block;
  margin: 5px 50px;
  padding: 1px;
}

.address {
  float: right;
}

.tel {
  float: left;
}

@media screen and (min-width: 748px) {
  .footer-container{
   width: 100%;
   padding-inline-start: 5rem;
  }
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
body > *{
  flex-grow: 0;
}
body > nav   .card-container {
  flex-grow: 1;
}

<div >
  <div >
    <div ></div>
    <a href="" >
      <div ></div>
    </a>
    <div >
      <div >
        <a >NEWS</a>
      <div >6/11/2018</div>
      </div>
      <h1 >There have been big Tesla accident at New Jersey</h1>
      <div >by <a href="">Sardorbek Usmonov</a></div>
    </div>
  </div>
  <div >
    <div ></div>
    <a href="" >
      <div ></div>
    </a>
    <div >
      <div >
        <a >Tech</a>
      <div >6/07/2018</div>
      </div>
      <h1 >Samsung laptops is exploding again</h1>
      <div >by <a href="">Tyler Platt</a></div>
    </div>
  </div>
  <div >
    <div ></div>
    <a href="" >
      <div ></div>
    </a>
    <div >
      <div >
        <a >Deals</a>
      <div >5/27/2018</div>
      </div>
      <h1 >Apple is having big Sale for the first time</h1>
      <div >by <a href="">Timur Mirzoyev</a></div>
    </div>
  </div>
  <div >
    <div ></div>
    <a href="" >
      <div ></div>
    </a>
    <div >
      <div >
        <a >Politics</a>
      <div >5/20/2018</div>
      </div>
      <h1 >Net-Nutrality is coming to its end</h1>
      <div >by <a href="">Gregoy Trem</a></div>
    </div>
  </div>
  
</div>


   <footer>
    
     <div >
     <ul >
       <li><a href="http://facebook.com"><i ></i></a></li>
       <li><a href="http://twitter.com"><i ></i></a></li>
       <li><a href="http://telegram.com"><i ></i></a></li>
       <li><a href="http://instagram.com"><i ></i></a></li>
       </ul>
     </div>
    <div >
    <p>
        &copy; <span id="date"></span>
        <span ></span>
       by me  <a href=""></a>
    </p>
   </div>
  </footer>

CodePudding user response：

.card-container needs min-height: 100vh; instead of height: 100vh;