Q:

Prevent inside contents inside parent container from making the parent disappear

I have this script that uses a toggle button to show or hide a targeted parent container. There is two correct ways that the parent class container hides by 
pressing the toggle button the second time or by clicking outside the parent class container. So it works perfectly but any time I add any thing inside that 
parent class container and I click those inside contents it makes the whole parent class container disappear how can I prevent that?
Here is my code

  document.addEventListener('DOMContentLoaded', function(){

document.addEventListener('click',closeContainer);

function closeContainer(obj){
     var containerVar = document.querySelector('.container');
    if(obj.target.className != 'container') {
        if (containerVar.style.display === 'flex') {
            containerVar.style.display = 'none';
        } else  if(obj.target.id == 'toggle') {
            containerVar.style.display = 'flex';
        }
    }
  }
  
});
.container{
background-color: orange;
height: 350px;
width: 350px;
margin-left: auto;
margin-right: auto;
display: none;
justify-content: center;
}

.inner-container{
 margin-top: 50px;
 background-color: red;
 height: 200px;
 width: 200px;
 display: inline-block;
}
<button id='toggle'>Toggle</button>
<div class='container'>
  <div class='inner-container'></div>
</div>

A:

You need to capture click events on your container and stop propagation, then there's no need to check the target in your document's event handler: 

document.addEventListener('DOMContentLoaded', function() {

  // if click event is inside container, then stop propagation
  const container = document.querySelector('.container');
  container.addEventListener('click', function(e) {
    e.stopPropagation();
  });

  document.addEventListener('click', closeContainer);

  function closeContainer(obj) {
    var containerVar = document.querySelector('.container');
    if (containerVar.style.display === 'flex') {
      containerVar.style.display = 'none';
    } else if (obj.target.id == 'toggle') {
      containerVar.style.display = 'flex';
    }
  }

});
.container {
  background-color: orange;
  height: 350px;
  width: 350px;
  margin-left: auto;
  margin-right: auto;
  display: none;
  justify-content: center;
}

.inner-container {
  margin-top: 50px;
  background-color: red;
  height: 200px;
  width: 200px;
  display: inline-block;
}
<button id='toggle'>Toggle</button>
<div class='container'>
  <div class='inner-container'></div>
</div>

Another solution would be to only have one event handler on document and check if the target or any of its ancestors have the container class (similar to jquery's closest method):

document.addEventListener('DOMContentLoaded', function() {

  document.addEventListener('click', closeContainer);

  function closeContainer(obj) {
    if (closest(obj.target, '.container')) return;

    var containerVar = document.querySelector('.container');
    if (containerVar.style.display === 'flex') {
      containerVar.style.display = 'none';
    } else if (obj.target.id == 'toggle') {
      containerVar.style.display = 'flex';
    }
  }

  function closest(el, selector) {
    const matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector;

    while (el) {
      if (matchesSelector.call(el, selector)) {
        return el;
      } else {
        el = el.parentElement;
      }
    }
    return null;
  }

});
.container {
  background-color: orange;
  height: 350px;
  width: 350px;
  margin-left: auto;
  margin-right: auto;
  display: none;
  justify-content: center;
}

.inner-container {
  margin-top: 50px;
  background-color: red;
  height: 200px;
  width: 200px;
  display: inline-block;
}
<button id='toggle'>Toggle</button>
<div class='container'>
  <div class='inner-container'></div>
</div>

