Have Parent Div Height Dependent on Relative Position of Children-CodePudding

I want to create a card which will contain three child divs, but only one will be shown at a time and as the user progresses through step 1 --> 2 --> 3, the appropriate child div will slide from right to view (as the previous one slides to the left out of view).

In the snippet below, I would like the height of the parent container to only span 30px (but set this dynamically) since the children divs only reach down to a height of 30px (since they overlap).

.container {
  border-style: solid;
  border-width: 2px;
  width: 30px;
}

.childOne {
  position: relative;
  height: 30px;
  background-color: red;
}

.childTwo {
  position: relative;
  top: -30px;
  height: 30px;
  background-color: blue;
}

<div class='container'>
  <div class='childOne'></div>
  <div class='childTwo'></div>
</div>

CodePudding user response：

Use CSS grid and make the child on the same area:

.container {
  border-style: solid;
  border-width: 2px;
  width: 30px;
  display: grid;
}

.container>* {
  grid-area: 1/1;
  height: 30px;
}

.childOne {
  background-color: red;
}

.childTwo {
  background-color: blue;
}

<div class='container'>
  <div class='childOne'></div>
  <div class='childTwo'></div>
</div>

CodePudding user response：

In my opinion, you should use JavaScript to properly do this, here is a sample I have created for you, Starting with your CSS I have commented on the top property for the second page (slide),

.container {
        border-style: solid;
        border-width: 2px;
    }

    .childOne {
        position: relative;
        height: 200px;
        background-color: red;
        display: block;
    }

    .childTwo {
        position: relative;
        /*top: -200px;*/
        height: 200px;
        background-color: blue;
        display: none;
    }

I just added 2 simple buttons to do the action, you can do it in different ways,

<div class='container'>
    <div class='childOne'></div>
    <div class='childTwo'></div>
</div>

<button onclick="slideTo(1)">Slide One</button>
<button onclick="slideTo(2)">Slide two</button>

here is a simple function to change the display property for the page (slide), since we have only 2 pages, I just done this way,

<script>
    let childs = document.querySelector(".container");
    let totalPages = childs.children.length;

    function slideTo(page){
        // Parse to INT
        var page = parseInt(page);
        // childs Starting with 0
        page -= 1;
        // Invalid page...
        if (page > totalPages){
            return;
        }else{
            if (page === 0){
                childs.children[page].style.display = "block";
                childs.children[page 1].style.display = "none";
            }else{
                childs.children[page-1].style.display = "none";
                childs.children[page].style.display = "block";
            }
        }
    }
</script>

Hope it helps you, also please upvote my answer if you liked :)