父级容器固定高度給属性overflow:auto超出会出现滚动条，怎么让指定的子级突破父级显示

父级div里面有个下拉框，下拉时会高度超出父级会被遮盖一部分需要拉动滚动条才能看完所有内容

这样非常影响体验。
有什么办法可以让下拉框突破父级显示完整呢？
以下是演示代码

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link rel="stylesheet" href="~/layuiadmin/layui/css/layui.css" media="all">
    <style>
        .main {
            height:200px;
            width:500px;
            margin:200px auto;
            overflow-y:auto;
            border:2px solid #ddd;
            display:flex;
            align-items:center;
            justify-content:center;
        }
    </style>
</head>
<body>
    <div class="main layui-form">
        <div class="layui-form-item">
            <label class="layui-form-label">选择框</label>
            <div class="layui-input-block">
                <select name="city" lay-verify="required">
                    <option value=""></option>
                    <option value="0">北京</option>
                    <option value="1">上海</option>
                    <option value="2">广州</option>
                    <option value="3">深圳</option>
                    <option value="4">杭州</option>
                </select>
            </div>
        </div>
    </div>
    <script src="~/layuiadmin/layui/layui.js"></script>
    <script>
        //Demo
        layui.use('form', function () {
            var form = layui.form;

            //监听提交
            form.on('submit(formDemo)', function (data) {
                layer.msg(JSON.stringify(data.field));
                return false;
            });
        });
    </script>
</body>
</html>