Change parent height based on child height

Question

I have a container (class of parent) and 3 absolute children (class of children). I want to change the container height based on the current child height (without scroll bar), the child is visible inside container. I tried to set height to fit-content but it's not working. Here is the code:

const child1 = document.getElementById("child1"),
  child2 = document.getElementById("child2"),
  child3 = document.getElementById("child3"),
  next = document.getElementsByClassName("next"),
  back = document.getElementsByClassName("back");

for (let i = 0; i < next.length; ++i) {
  next[i].addEventListener("click", function() {
    child1.style.left = "-100%";
    const temp = this.dataset.to;
    if (temp === "2") child2.style.left = 0;
    else child3.style.left = 0;
  });
}

for (let i = 0; i < back.length; ++i) {
  back[i].addEventListener("click", function() {
    child1.style.left = 0;
    const temp = this.dataset.from;
    if (temp === "2") child2.style.left = "100%";
    else child3.style.left = "100%";
  });
}

* {
  margin: 0;
}

.parent {
  margin: 20px auto;
  width: 300px;
  height: 300px;
  position: relative;
  border: 2px solid black;
  overflow-x: hidden;
}

.children {
  width: 100%;
  position: absolute;
  top: 0;
  transition: left .5s ease;
}

#child1 {
  left: 0;
  height: 600px;
}

#child2 {
  left: 100%;
  height: 400px;
}

#child3 {
  left: 100%;
  height: 500px;
}

<div class="parent">
  <div class="children" id="child1">
    <h1>Child1</h1>
    <button class="next" data-to="2">Go to child2</button>
    <button class="next" data-to="3">Go to child3</button>
  </div>
  <div class="children" id="child2">
    <h1>Child2</h1>
    <button class="back" data-from="2">Back</button>
  </div>
  <div class="children" id="child3">
    <h1>Child3</h1>
    <button class="back" data-from="3">Back</button>
  </div>
</div>

Thank you in advance!

Answer 1

Here is a simple solution with a very small change to your code

const child1 = document.getElementById("child1"),
  child2 = document.getElementById("child2"),
  child3 = document.getElementById("child3"),
  next = document.getElementsByClassName("next"),
  back = document.getElementsByClassName("back")


const activeChild = (child) => {
  child.parentElement.style.minHeight = child.offsetHeight + "px"
  return child;

}
for (let i = 0; i < next.length; ++i) {
  next[i].addEventListener("click", function() {
    child1.style.left = "-100%";
    const temp = this.dataset.to;
    if (temp === "2") {
      child2.style.left = 0;
      activeChild(child2)
    } else {
      child3.style.left = 0;
      activeChild(child3)
    }
  });
}

for (let i = 0; i < back.length; ++i) {
  back[i].addEventListener("click", function() {
    child1.style.left = 0;
    activeChild(child1)
    const temp = this.dataset.from;
    if (temp === "2") child2.style.left = "100%";
    else child3.style.left = "100%";
  });
}

activeChild(child1); // ini

* {
  margin: 0;
}

.parent {
  margin: 20px auto;
  width: 300px;
  min-height: 300px;
  position: relative;
  border: 2px solid black;
  overflow: hidden;
}

.children {
  min-width: 300px;
  position: absolute;
  top: 0;
  transition: left .5s ease;

}

#child1 {
  left: 0;
  height: 100px;
}

#child2 {
  left: 100%;
  height: 200px;
}

#child3 {
  left: 100%;
  height: 300px;
}

<div class="parent">
  <div class="children" id="child1">
    <h1>Child1</h1>
    <button class="next" data-to="2">Go to child2</button>
    <button class="next" data-to="3">Go to child3</button>
  </div>
  <div class="children" id="child2">
    <h1>Child2</h1>
    <button class="back" data-from="2">Back</button>
  </div>
  <div class="children" id="child3">
    <h1>Child3</h1>
    <button class="back" data-from="3">Back</button>
  </div>
</div>

Answer 2

It's easy to do with javascript. First I'm getting the height of all children. Then setting the height of parent accordingly. Weirdly when the children are pushed to the right, they cause vertical scrollbar to apear although they are absolute positioned. So I set the overflow: hidden; on parent to hide both scrollbars. and don't worry it doesn't cause the content to be hidden vertically. To prove that I have placed h3 tags at the bottom of all children.

const parent = document.getElementById("parent"),
  child1 = document.getElementById("child1"),
  child2 = document.getElementById("child2"),
  child3 = document.getElementById("child3"),
  next = document.getElementsByClassName("next"),
  back = document.getElementsByClassName("back")
  child1Height = child1.offsetHeight,
  child2Height = child2.offsetHeight,
  child3Height = child3.offsetHeight;
  
  parent.style.height = child1Height + 'px';

for (let i = 0; i < next.length; ++i) {
  next[i].addEventListener("click", function() {
    child1.style.left = "-100%";
    const temp = this.dataset.to;
    if (temp === "2") {
      parent.style.height = child2Height + 'px';
      child2.style.left = 0;
    } 
    else {
      parent.style.height = child3Height + 'px';
      child3.style.left = 0;
    }
    // console.log(parent.offsetHeight);
  });
}

for (let i = 0; i < back.length; ++i) {
  back[i].addEventListener("click", function() {
    parent.style.height = child1Height + 'px';
    child1.style.left = 0;
    const temp = this.dataset.from;
    if (temp === "2") {
      child2.style.left = "100%";
    } 
    else {
      child3.style.left = "100%";
    }
    // console.log(parent.offsetHeight);
  });
}

* {
  margin: 0;
}

.parent {
  margin: 20px auto;
  width: 300px;
  position: relative;
  border: 2px solid black;
  overflow: hidden;
}

.children {
  width: 100%;
  position: absolute;
  top: 0;
  transition: left .5s ease;
}

h3 {
  position: absolute;
  bottom: 0;
  right: 0;
}

#child1 {
  left: 0;
  height: 100px;
}

#child2 {
  left: 100%;
  height: 200px;
}

#child3 {
  left: 100%;
  height: 300px;
}

<div id="parent" class="parent">
  <div class="children" id="child1">
    <h1>Child1</h1>
    <button class="next" data-to="2">Go to child2</button>
    <button class="next" data-to="3">Go to child3</button>
    <h3>This is bottom</h3>
  </div>
  <div class="children" id="child2">
    <h1>Child2</h1>
    <button class="back" data-from="2">Back</button>
    <h3>This is bottom</h3>
  </div>
  <div class="children" id="child3">
    <h1>Child3</h1>
    <button class="back" data-from="3">Back</button>
    <h3>This is bottom</h3>
  </div>
</div>