How to increase size of div according to its contents

You need to have a dynamic width and height attribute such as fit-content. The problem is that you are using a fixed width of 936px and also a fixed height of 475px so the div will never stretch to be larger than that. You can do this instead:

<div id="right-container" style="...">   
</div>

Then in css:

.right-container {
  min-width: 936px;
  min-height: 475px;
  width: fit-content;
  height: fit-content;
}

When the elements inside of right-container grow, then right-container will stretch to fit them inside.

As the others have pointed out, you are using fixed widths and heights, so the elements aren't going to grow to fit the content.

But I would suggest that you're going about this in generally a wrong way.

Some larger principles to consider:

1. Avoid inline styling. Use CSS to style your elements instead.

2. Avoid fixed sizing. Using things like flexbox instead.

For example, here's how I would do what you're doing here:

$("button").click(() => {
  console.log("foo");
  $(".right").append("<table/>");
});

.main {
  display: flex;
  flex-flow: column nowrap;

  /* I'm doing fixed size here, as we need an initial container size*/ 
  height: 100px;
  width: 500px;
}

header {

  /**
    A specific height on header seems ok. 
  */ 
  flex: 0 0 4em;  
  background-color: #ddf;
}

.content {

  /* Content fills the rest of the container*/ 
  flex: 1 0 auto;
  display: flex;
  flex-flow: row nowrap;
}

.left {

  /*Have a fixed width on the left. Maybe a percentage would be better*/ 
  flex: 0 0 10em;
  background-color: #fdd;
}

.right {

  /* Right fills the remainder*/ 
  flex: 1 0 auto;
  background-color: #dfd;
}

table {
  /*Fixed size for demonstration.*/
  border: solid 1px black;
  width: 150px;
  height: 150px;
}


button {
   margin: 1em; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button> click me to add content</button>

<div class="main">
  <header> admin panel </header>

  <div class="content">
    <section class="left"> left </section>
    <section class="right"> right </section>
  </div>
</div>

You have 3 options here:

1. You can use floats and clearfix.
2. You can use display:flex
3. You can use display :grid and then use flex

If you are targeting modern browsers only then option 2 and 3 will work great.

Please find below the HTML and CSS for the same - I hope it resolves your issue:

HTML

<!--outer div ends -->
<div id="outer_div" class="outer_div1">
  <div id="header" class="header1">
    <h1>Admin Panel</h1>
  </div>
  <div class="sec">
    <!-- header ends-->
    <div id="lef-container" class="left1">Left
    </div>
    <!--left-container ends -->
    <div id="right-container" class="right1">Right
      <!-- this div contains dynamica table   -->
    </div>
    <!--right-container ends -->
  </div>
</div>

CSS

.outer_div1 {
  background-color: Gainsboro;
  display: flex;
  flex-direction: column;
  margin: 0px auto;
  max-width: 1240px;

}

.sec{
  display: flex;
  flex-direction: row;
}
.header1 {
  background-color: Khaki;
  text-align: center;


}

.header1>h1 {

}

.left1 {
  background-color: LightSteelBlue;
  width:calc(30% - 1.5rem);
  margin: 1rem 1.5rem 1rem 1rem;
  min-height: 50vh;
  border-radius: .5rem;
  padding:1rem;
}

.right1 {
  background-color: LightSteelBlue;
  width:calc(70% - 1.5rem);
  min-height: 50vh;
  margin: 1rem 1.5rem 1rem 1rem;
  border-radius: .5rem;
  padding:1rem;
}