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

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

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

<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>

这是做不到的，除非把子元素放到父元素之外才可以

overflow:hidden，然后不设置高度，则子元素会自动撑开当前元素

然后根据你的图，你应该设置layui-input-block position:relative;overflow:visible，然后 select position:absolute;加定位，就可以了

设置定位吧