How to hide the content that's outside the parent div with aside?

Question

I have the following snippet:

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"/>
    <div class="h-screen w-32 bg-gray-300">
        <aside class="grid grid-cols-2 bg-yellow-400 w-64 h-full">
            <div class="bg-red-300">
                One
            </div>
            <div class="bg-green-300">
                Two
            </div>

        </aside>
    </div>

There is a parent div with fixed width (w-32) and a child aside that is double the width of the parent. So I want only one half, the one that's inside the area of the parent div to be shown

How can I do that?

Answer 1

If you are planning to toggle between those two-child div, You can do something like this.

• Make one div to display none.
• and make another one to display block(I used active class).
• set main parent div(h-screen) to overflow-hidden.
• and toggle between active class on click.

$(document).ready(function () {
  $(".h-screen aside div").click(function(){
    $(".h-screen aside div").toggleClass("active");
  });
});

.h-screen{
  overflow:hidden;
}
aside div {display:none}
aside div.active {display:block}

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="h-screen w-32 bg-gray-300">
        <aside class="grid grid-cols-2 bg-yellow-400 w-64 h-full">
            <div class="bg-red-300 active">
                One
            </div>
            <div class="bg-green-300">
                Two
            </div>

        </aside>
    </div>

Answer 2

So you can just simple add style to toggle you want hide at this moment :

sample code:

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"/>
    <div class="h-screen w-32 bg-gray-300">
        <aside class="grid grid-cols-2 bg-yellow-400 w-64 h-full">
            <div style="display:none;" class="bg-red-300">
                One
            </div>
            <div class="bg-green-300">
                Two
            </div>

        </aside>
    </div>

Just added :style="display:none;" inside ONE - in result the only Two is visible :) You can do that in both ways ofc.

and resul looks like :

@EDIT 1 :

HTML code:

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"/>
    <div class="h-screen w-32 bg-gray-300">
        <aside  style class=" bg-yellow-400 w-64 h-full">
            <div id="one" class="one">
                One
            </div>
            <div id = "two"class="two">
                Two
            </div>

        </aside>
    </div>
    

CSS code:

.two {
  
  background: red;
    width: 50%;
    float: right;
    height: 250px;
    position: absoulte;
}

.one {
  
  background: blue;
  width: 50%;
  float: left;
  height: 250px;
  position: absoulte;
}

JS code to show and hide ONE and TWO

let subsWrapper = document.getElementById("one");
subsWrapper.remove();
document.getElementById("element_id").remove();