Zoe,
Your issue is the overflow: hidden;
Here is a quick sample:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Expand widget [beta] - 4.6</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.6/esri/css/main.css">
<script src="https://js.arcgis.com/4.6/"></script>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
.cont {
color: #323232;
background-color: #fff;
overflow-y: auto;
position: relative;
width: 420px;
max-height: 540px;
padding: 8px;
}
</style>
<script>
require([
"esri/Map",
"esri/views/SceneView",
"esri/widgets/Expand",
"esri/widgets/BasemapGallery",
"dojo/dom",
"dojo/domReady!"
], function(
Map, SceneView, Expand, BasemapGallery, dom
) {
var map = new Map({
basemap: "satellite"
});
var view = new SceneView({
container: "viewDiv",
map: map
});
var basemapGallery = new BasemapGallery({
view: view,
container: document.createElement("div")
});
var bgExpand = new Expand({
view: view,
content: basemapGallery.container,
expandIconClass: "esri-icon-basemap"
});
var cExpand = new Expand({
view: view,
content: dom.byId('custom'),
expandIconClass: "esri-icon-experimental"
});
view.ui.add(bgExpand, "top-right");
view.ui.add(cExpand, "top-right");
});
</script>
</head>
<body>
<div id="viewDiv"></div>
<div class="cont" id="custom">Blah Blah<br>
First name: <input type="text" name="fname"><br><br>
Last name: <input type="text" name="lname"><br><br>
Blah Blah<br>
First name: <input type="text" name="aname"><br><br>
Last name: <input type="text" name="bname"><br><br>
Blah Blah<br>
First name: <input type="text" name="cname"><br><br>
Last name: <input type="text" name="dname"><br><br>
<br><br><br><br><br>
Blah Blah<br>
<br><br><br><br><br>
Blah Blah<br>
<br><br><br><br><br>
Blah Blah<br>
</div>
</body>
</html>