我有一个需要握住的布局<aside>
宽度固定,中间内容为流体。一切都很好,但如果你使用<pre>
中间内容内的元素,之后您将尝试将窗口大小调整为小分辨率<pre>
没有水平滚动并且弹性元素溢出。<pre>
元素作为块元素,具有overflow: auto
.
有什么想法如何解决吗?
非常感谢,最诚挚的问候,
jsFiddle https://jsfiddle.net/evwh3mh2/8/
body {
margin: 0;
}
header {
background-color: green;
}
footer {
background-color: red;
}
header,
footer {
width: 100%;
height: 100px;
}
main {
display: flex;
background-color: purple;
}
aside {
overflow-x: hidden;
flex: 0 0 270px;
}
article {
flex-grow: 1;
min-height: 100vh;
background-color: lightgray;
}
pre {
overflow: auto;
font-size: 87.5%;
color: #dc3545;
}
<header>
header
</header>
<main>
<aside>
aside left
</aside>
<article>
<h1>CONTENT</h1>
<pre>
<button class="btn btn-primary num-badge num-badge--text-primary" data-num-badge="9">Primary button</button>
<button class="btn btn-primary num-badge num-badge--text-primary num-badge--border-primary" data-num-badge="9">Primary button</button>
<button class="btn btn-primary num-badge num-badge--text-primary num-badge--border-primary num-badge--font-awesome" data-num-badge="&#xf021;">Primary button</button>
<a class="num-badge" data-num-badge="9">Basic Link</a>;</pre>
</article>
<aside>
aside right
</aside>
</main>
<footer>
footer
</footer>
你有overflow: auto
on the pre
元素。
pre {
overflow: auto;
font-size: 87.5%;
color: #dc3545;
}
它不能溢出自身。它溢出了父级。
所以,移动overflow
to article
.
article {
overflow: auto; /* new */
flex-grow: 1;
min-height: 100vh;
background-color: lightgray;
}
修改后的jsfiddle https://jsfiddle.net/evwh3mh2/10/
这里更详细地解释了问题和解决方案:
- 为什么弹性项目不会缩小到超过内容大小? https://stackoverflow.com/q/36247140/3597276
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)