我正在使用 flex 显示模式尝试一些事情,在实现嵌套在固定宽度 div 元素中的屏幕宽度 div 元素时遇到了这个问题。
html,
body {
margin: 0;
}
#overdiv {
position: relative;
}
.landing {
display: table;
width: 100%;
height: 100%;
background-color: #002699;
}
.content {
width: 1000px;
margin: 0 auto;
}
.wide-flex {
display: flex;
flex-flow: column nowrap;
align-items: center;
}
.wide-head {
display: flex;
background-color: grey;
box-sizing: border-box;
justify-content: center;
align-items: center;
width: 100vw;
}
.container h2 {
color: white;
opacity: 0.9;
text-align: center;
font-size: 50px;
padding: 10px 10px;
border-radius: 5px;
}
<div id="overdiv">
<section class="landing">
<div class="container">
<div class="content">
<div class="wide-flex">
<div class="wide-head">
<h2>Header 1</h2>
</div>
</div>
<p>
<!--filler text -->
</p>
</div>
<div class="content">
<div class="wide-flex">
<div class="wide-head">
<h2>Header 1</h2>
</div>
</div>
<p>
<!--filler text -->
</p>
</div>
<div class="content">
<div class="wide-flex">
<div class="wide-head">
<h2>Header 1</h2>
</div>
</div>
<p>
<!--filler text -->
</p>
</div>
<div class="content">
<div class="wide-flex">
<div class="wide-head">
<h2>Header 1</h2>
</div>
</div>
<p>
<!--filler text -->
</p>
</div>
</div>
</section>
</div>
当内容超出屏幕高度时,浏览器(Firefox 57)除了提供垂直滚动条外,还提供横向滚动条。有没有办法消除横向滚动条?
最佳答案
尝试:
overflow-x: hidden;
例如:
#overdiv {
overflow-x: hidden;
}
关于html - 从 flex 显示中消除横向滚动条,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48518935/