overflow-y正在影响overflow-x

Question

我希望左栏（#left）有overflow-y: scroll和overflow-x: visible。但是，overflow-x在我测试它时最终会滚动，尽管代码说的不同。我究竟做错了什么？感谢。

＆＃13;

＆＃13;

$(document).ready(function(){
    $("#title").click(function(){
        $("#title").hide();
    });
    $("#one").click(function(){
        $("#one").addClass("open");
        $("#oneBottom").addClass("clicked");
        
        $("#two").removeClass("open");
        $("#twoBottom").removeClass("clicked");
        
        $("#three").removeClass("open");
        $("#threeBottom").removeClass("clicked");
        
        $("#four").removeClass("open");
        $("#fourBottom").removeClass("clicked");
        
        $("#five").removeClass("open");
        $("#fiveBottom").removeClass("clicked");
    });
    
    $("#two").click(function(){
        $("#two").addClass("open");
        $("#twoBottom").addClass("clicked");
        
        $("#one").removeClass("open");
        $("#oneBottom").removeClass("clicked");	
        
        $("#three").removeClass("open");
        $("#threeBottom").removeClass("clicked");
        
        $("#four").removeClass("open");
        $("#fourBottom").removeClass("clicked");
        
        $("#five").removeClass("open");
        $("#fiveBottom").removeClass("clicked");
    });
    
    $("#three").click(function(){
        $("#three").addClass("open");
        $("#threeBottom").addClass("clicked");
        
        $("#one").removeClass("open");
        $("#oneBottom").removeClass("clicked");	
        
        $("#two").removeClass("open");
        $("#twoBottom").removeClass("clicked");
        
        $("#four").removeClass("open");
        $("#fourBottom").removeClass("clicked");
        
        $("#five").removeClass("open");
        $("#fiveBottom").removeClass("clicked");
    });
    
    $("#four").click(function(){
        $("#four").addClass("open");
        $("#fourBottom").addClass("clicked");
        
        $("#one").removeClass("open");
        $("#oneBottom").removeClass("clicked");	
        
        $("#two").removeClass("open");
        $("#twoBottom").removeClass("clicked");
        
        $("#three").removeClass("open");
        $("#threeBottom").removeClass("clicked");
        
        $("#five").removeClass("open");
        $("#fiveBottom").removeClass("clicked");
    });
    
    $("#five").click(function(){
        $("#five").addClass("open");
        $("#fiveBottom").addClass("clicked");
        
        $("#one").removeClass("open");
        $("#oneBottom").removeClass("clicked");	
        
        $("#two").removeClass("open");
        $("#twoBottom").removeClass("clicked");
        
        $("#three").removeClass("open");
        $("#threeBottom").removeClass("clicked");
        
        $("#four").removeClass("open");
        $("#fourBottom").removeClass("clicked");
    });
});

＆＃13;

.open{
    margin-left: 124% !important;
    margin-top: 18% !important;
    width: 187% !important;
    height: 80% !important;
    font-size: 250% !important;
}
.clicked{
    border: red solid 3px !important;	
}
html{
    width: 100%;
    height: 100%;
    margin: 0px;
    border: 0px;
}
body{
    width: 100%;
    height: 100%;
    margin: 0px;
    border: 0px;
}
#title{
    height: 10%;
    width: 100%;
    margin-bottom: 1%;
    background-color: rgba(0, 0, 255, 0.5);
}
h1{
    text-align: center;
}
#left{
    width: 30%;
    height: 100%;
    position: absolute;
    overflow-y: scroll;
    overflow-x: visible;
}
#right{
    width: 70%;
    height: 100%;
    position: absolute;
    margin-left: 30%;
    border-left: solid 2px black;
}
.card{
    height: 20%;
    width: 80%;
    margin-left: 10%;
    position: absolute;
    background-color: blue;
    border-radius: 5px;
    border: grey solid 2px;
}
.first{
    margin-top: 6.5%;
}
#one{
    background-color: green;
}
.second{
    margin-top: 50%;
}
#two{
    background-color: green;
}
.third{
    margin-top: 93%;
}
#three{
    background-color: green;
}
.fourth{
    margin-top: 136%;
}
#four{
    background-color: green;
}
.fith{
    margin-top: 179%;
}
#five{
    background-color: green;
}
#main{
    width: 80%;
    height: 80%;
    margin-left: 10%;
    margin-top: 7.5%;
    background-color: white;
    border-radius: 5px;
    border: grey solid 3px;
    opacity: 0.5;
}

＆＃13;

<html>
	<head>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

	</head>
	<body>
		<div id="title">
			<h1>Blah Blah Blah</h1>
		</div>
		<div id="left">
			<div class="card first" id="oneBottom">
				<h1>Hello</h1>
				<p>Heljaldf</p>
			</div>
			<div class="card first" id="one">
				<h1>Hello</h1>
				<p>Heljaldf</p>
			</div>
			
			<div class="card second" id="twoBottom">
				<h1>Sup</h1>
			</div> 		
			<div class="card second" id="two">
				<h1>Sup</h1>
			</div>

			<div class="card third" id="threeBottom">
			</div>
			<div class="card third" id="three">
			</div>

			<div class="card fourth" id="fourBottom">
			</div>
			<div class="card fourth" id="four">
			</div>

			<div class="card fith" id="fiveBottom">
			</div>
			<div class="card fith" id="five">
			</div>
		</div>
		<div id="right">
			<div id="main">
			</div>
		</div>
	</body>
</html>

＆＃13;

＆＃13;

＆＃13;

Answer 1

你使用#left时遇到的问题是你用滚动混合可见。因为你正在混合值，所以它将被视为自动显示为自动。

在此处查看W3文档：http://www.w3.org/TR/css3-box/#collapse-scroll