summernote dropdown-menu overflow - css

Question

I have a 2 columns layout inside 2 divs with different margins set, on the left column I have a bootstrap datetimepicker and summernote.
As you can see the datetimepicker dialog overflows outside the internal div, how can I achieve the same with summernote's dropdowns? Is it possible?
Here's my playground with the issue: https://jsfiddle.net/SycoLTH/2j0ykbgf/
<style>
form {
height: 100%;
width: 100%;
}
#out-container {
background-color: #000000;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
display: flex;
}
#in-container {
background-color: #FFFFFF;
width: 100%;
height: 100%;
max-height: 80%;
max-width: 70%;
margin: auto;
padding: 3%;
}
#column-left,
#column-right {
height: 100%;
width: 50%;
overflow: auto;
}
</style>
<script type="text/javascript">
$(".datetimepicker").datetimepicker({
showClear: true,
showTodayButton: true
});
$(".summernote").summernote({
theme: "simplex",
disableDragAndDrop: true,
shortcuts: false,
toolbar: [
["style", ["bold", "italic", "underline", "clear"]],
["misc", ["undo", "redo"]],
["font", ["strikethrough", "superscript", "subscript"]],
["fontsize", ["fontsize"]],
["color", ["color"]],
["para", ["ul", "ol", "paragraph"]],
["insert", ["picture", "link", "video", "table", "hr"]],
["height", ["height"]]
]
});
</script>
<div id="out-container">
<div id="in-container">
<form>
<div id="column-left" class="pull-left">
Some text
<br> Some text
<br> Some text
<br> Some text
<br> Some text
<br> Some text
<br>
</div>
<div id="column-right" class="pull-left">
Date:
<br>
<input type="text" class="datetimepicker form-control" />
<br>
<br> Text:
<br>
<textarea class="summernote"></textarea>
</div>
</form>
</div>
</div>

Answer 1

position: absolute objects are cropped by the bound of its nearest position: relative object. In this case, the easiest way to show summernote popovers over the boundary, try to set the right column as below.
#column-right {
overflow:visible;
}
Ref: http://front-back.com/how-to-make-absolute-positioned-elements-overlap-their-overflow-hidden-parent