Change father’s height by son’s height

Question

I would like to do this in CSS:

$("div.slider").height($("div.slider div.slide").height())

it is possible?

The goal is to create a slide where the height of the div container (slider) is always, and at runtime, the same height as the div child (slide)

I tried it the way down but it’s all gone:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(e) {
	
//$("div.slider").height($("div.slider div.slide").height())

const blocos = $("div.slider div.slide");

function startslider() {  

  ativa = $("div.slider div.ativa")
  
  if (!$(ativa).next().length) {
    ativa = blocos[0]
  }
  
   $(ativa)
	  .removeClass("ativa")
	  .next()
	  .addClass("ativa")
  
   setTimeout(startslider, 5000)
}

setTimeout(startslider, 5000)

$("nav button.anterior").click(function(){

  prev = $("div.slider div.ativa").prev();  
  prev = prev.length ? prev : blocos[ blocos.length - 1 ];  
  mostraBloco(prev);
  
})

$("nav button.proximo").click(function(){
	
  next = $("div.slider div.ativa").next();    
  next = next.length ? next : blocos[0];    
  mostraBloco(next);
  
})

/* Função para exibir as imagens */
function mostraBloco(next) {
	
  ativa = $("div.slider div.ativa")
  
  $(ativa).removeClass("ativa")
  $(next).addClass("ativa")
  
}
});
</script>

* {
	margin: 0;
	padding:0;
}

.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

div.slider {
    overflow: hidden;
    position:relative;
    width: 100vw;
    height:300px;
}

div.slider:hover {
  animation-play-state:paused;
}
div.slider div.slide {
    display:none;
    position:absolute;
    top:0;
    left:0;
	width:100%;
	height:auto;
}
div.slider div.slide img {
	width:100%;
}
div.slider div.ativa {
  display: block;
}
div.slider div.ativa img{
	animation: slider 1s linear;
	animation-fill-mode: forwards;
}

div.slider div.ativa img:hover {
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

@keyframes slider {
    0% {
        transform: scale(1);        
    } 
    100% {
        transform: scale(1.1);     
    }
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

div.slider div.slide span {
	position:absolute;
	width:100%;
	line-height:40px;
	bottom:0;
	z-index:500;
	color:rgb(255,255,255);
	text-align:center;
}
div.slider nav {
	position:absolute;
	bottom:0;
	width:100%;
	height:40px;
	background-color:rgb(0,0,0,.5);
	z-index:400;
	text-align:center;
}
div.slider nav button.anterior,
div.slider nav button.proximo {
	position:absolute;
	width:100px;
	height:40px;
	text-align:center;
}
div.slider nav button.anterior{
	left:10%;
}
div.slider nav button.proximo{
	right:10%;
}
div.slider nav button.proximo label {
	top:calc(50%-20px);
}

<div class="slider">
 <div class="slide fade ativa">
   <img  src="http://funerariasaopedro.net.br/novo/_img/_banner/_site/bg_1.jpg" />
   <span>Este é 1</span>
 </div>
 <div class="slide fade">
   <img  src="http://funerariasaopedro.net.br/novo/_img/_banner/_site/bg_2.jpg" />
   <span>Este é 2</span>
 </div>

 <nav>
  <button class="anterior">Anterior</button>
  <button class="proximo">Próximo</button>
 </nav>

</div>

</div>