JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<body>
<div class="react-grid-Viewport">
<div class="react-grid-Canvas opaque">
<div class="rows">
<div class="react-grid-Row">
<div class="react-grid-Cell">
<div class="react-grid-Cell__Value">
<div>
<div class="popup">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
CSS
.react-grid-Viewport {
height: 150px;
width: 400px;
background-color: blue;
overflow: hidden;
position: absolute;
top: 35px;
}
.react-grid-Canvas {
height: 149px;
width: 399px;
background-color: lightblue;
overflow-y: scroll;
overflow-x: auto;
position: absolute;
}
.rows {
height: 100px;
width: 700px;
background-color: red;
overflow: hidden;
}
.react-grid-Row {
background-color: darkred;
height: 35px;
overflow: hidden;
}
.react-grid-Cell {
background-color: green;
position: absolute;
left: 100px;
width: 100px;
height: 35px;
overflow: visible;
}
.popup {
background-color: lightgreen;
opacity: 0.8;
position: relative;
width: 150px;
height: 200px;
}