Put a Cytoscape graph inside a Bootstrap column

I have 4 Bootstrap columns: col-lg-1, col-lg-1, col-lg-4 and col-lg-6 (from left to right).

In the biggest column (col-lg-6), I would like to have a Cytoscape graph. Currently my Cytoscape style is the following (in the <head> section):

<style type="text/css">
#cy {
      height: 80%;
      width: 50%;
      position: absolute;
      left: 40%;
      top: 20%;
      background:red;
  }
</style>

Then in the body section, I have my leftmost column:

<div id="cy" class="col-lg-6" style="background-color:grey;">
Some text 

</div>

Finally, I have my script also in the body section of the HTML document:

<script type="text/javascript">
$( document ).ready(function() {

var cy = cytoscape({
    container: document.getElementById('cy'),
    .....
});

});

</script>

The problem now is that Cytoscape graph (and the leftmost column) doesn't stack below other columns when the browser resizes (as expected in a Bootstrap behavior).

Can you please show me a somehow detailed solution for this, I do appreciate your expertise very much.

Solution

First of all include the the Cytoscape graph section inside the col-lg-6

Get rid of position: absolute just set the height: 100%

Check the working demo here

Sample structure:

<!-- container-fluid : start -->
<div class="container-fluid">
  <row>
    <div class="col-sm-6">

       <----Include other stuff here----->

    </div>
    <div class="col-sm-6">

      <!-- graph : start -->
      <div class="panel panel-primary">
        <div class="panel-heading">Graph</div>
        <div class="panel-body">
          <div id="cy-container">
            <div id="cy"></div>
          </div>

        </div>
      </div>
      <!-- graph : end -->

    </div>


  </row>
</div>