我遇到一个问题,设置了最小/最大宽度的容器在水平滚动后背景颜色和边框被切断。
请忽略很多容器,这只是我正在处理的 React 组件树的简化版本:
.page-container {
width: 100%;
height: 100vh;
}
.bg-wrapper {
background-color: wheat;
min-width: 100%;
height: 100%;
}
.content-wrapper {
display: flex;
overflow: auto;
}
.container {
width: 100%;
height: 100%;
}
.bg-red {
background-color: red;
border: 1px solid yellow;
}
.bg-green {
background-color: green;
border: 1px solid yellow;
}
.box {
width: 100%;
margin: 0 auto;
min-width: 500px;
max-width: 1000px;
}
header {
display: flex;
justify-content: space-between;
width: 100%;
}
<div class="page-container">
<div class="bg-wrapper">
<div class="content-wrapper">
<div class="container">
<div class="container">
<div class="container">
<div class="bg-red">
<div class="box">
<header>
<h1>Test</h1>
<h3>Test</h3>
</header>
</div>
</div>
<div class="bg-green">
<div class="box">
<h1>Content</h1>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
我想到的唯一解决办法是将
display: inline-block
添加到 .content
但这会引入其他问题,所以我不希望这样
我不完全确定,但我认为这里的问题是 .bg-red 和 .bg-green div 不想扩展到全宽,所以也许可以尝试这个:
.bg-red, .bg-green {
width: 100%;
}
但了解此处发生情况的最简单方法是在浏览器中右键单击您的页面,然后选择“检查”。这是每个 Web 开发人员的必备工具,因为它提供了不同组件的大小并使调试变得更加容易。
例如,这里是检查器的 Firefox 文档:Firefox 检查器