overflow-y设置为auto,overflow-x设置为visible,子元素横向被裁剪了。为什么呢?如下代码,.abs-box左侧被裁减了。求解答,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>测试overflow</title>
<style>
.ant-layout {
width: 100vw;
height: 100vh;
}
.wrap {
height: calc(100% - 48px);
padding: 48px 16px 0px;
}
.content_wrapper {
height: 100%;
background: rgb(255, 255, 255);
position: relative;
}
.overflow-box {
height: 100%;
overflow-y: auto;
overflow-x: visible;
}
.supply-basic-info-box {
box-sizing: border-box;
}
.zw-box {
width: 100%;
height: 300px;
background-color: chocolate;
}
.approval-result-box {
padding: 60px 0 20px 46px;
position: relative;
background: brown;
}
.abs-box {
position: absolute;
width: 100px;
height: 10px;
background: chartreuse;
top: 6px;
left: -50px;
z-index: 99999;
}
</style>
</head>
<body>
<div class="ant-layout">
<div class="wrap">
<div class="content_wrapper">
<div class="overflow-box">
<div class="supply-basic-info-box">
<div class="zw-box"></div>
<div class="approval-result-box">
<div class="abs-box">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body
你把left去掉不就可以了吗?或者改成0


已参与了 SegmentFault 思否社区 10 周年「问答」打卡 ,欢迎正在阅读的你也加入。