In React a div has an height of a zero, then why its children are still showing on the screen

Issue

My goal is to hide div tag(id="two") when the button is clicked but also animate it like slideUp() in jquery, so after clicking on the button the div height set to zero and its work fine.

The problem is when the button is clicked the tags that are present in that div are still showing on screen why?

#one{
height: 200px;
background-color:green;
}
#two{
height:100px;
background-color:yellow;
position: absolute;
z-index:1;
transition: all 1.5s ease-in-out;
}

<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
        <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin>
        </script>
        <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> 

<div id="root"></div>

<div id="container"></div>
        
        <script type="text/babel">
        const hide = () => {
        var elem = document.getElementById("two");
        elem.style.height = "0px";
     };
        ReactDOM.render(
           <div id="one">
              <h1>this is Div one</h1>
              <div id="two" >
                <h1>why this h1 is not hidden after the click</h1>
                <button onClick={hide} id="hide" >click me</button>
              </div>
              <div id="three" >
                <h1>this is div three</h1>
              </div>
           </div>,
          document.getElementById('container')
        )
        </script>

Solution

The div is still overflowing, you can add overflow: hidden to div 2 to "hide" it when the parent div shrinks.

#two {
  height: 100px;
  background-color: yellow;
  position: absolute;
  z-index: 1;
  transition: all 1.5s ease-in-out;
  overflow: hidden; // <----- hide any overflow
}

#one {
  height: 200px;
  background-color: green;
}

#two {
  height: 100px;
  background-color: yellow;
  position: absolute;
  z-index: 1;
  transition: all 1.5s ease-in-out;
  overflow: hidden;
}

<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

<div id="root"></div>

<div id="container"></div>

<script type="text/babel">
  const hide = () => { var elem = document.getElementById("two"); elem.style.height = "0px"; }; ReactDOM.render(
  <div id="one">
    <h1>this is Div one</h1>
    <div id="two">
      <h1>why this h1 is not hidden after the click</h1>
      <button onClick={hide} id="hide">click me</button>
    </div>
    <div id="three">
      <h1>this is div three</h1>
    </div>
  </div>, document.getElementById('container') )
</script>

Answered By - Drew Reese