gpt4 book ai didi

html -
 内容不收缩的 Flex 元素

转载 作者:太空宇宙 更新时间:2023-11-04 15:52:12 25 4
gpt4 key购买 nike

<分区>

我有一个需要放置 <aside> 的布局具有固定宽度和中间内容作为流体。一切都很好,但如果你使用 <pre>中间内容中的元素,然后您将尝试将窗口大小调整为小分辨率,然后是 <pre>没有水平滚动和 flex 元素溢出。 <pre>元素作为 block 元素,带有overflow: auto .

有什么解决办法吗?

非常感谢,最好的问候,

jsFiddle

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>
&lt;button class=&quot;btn btn-primary num-badge num-badge--text-primary&quot; data-num-badge=&quot;9&quot;&gt;Primary button&lt;/button&gt;
&lt;button class=&quot;btn btn-primary num-badge num-badge--text-primary num-badge--border-primary&quot; data-num-badge=&quot;9&quot;&gt;Primary button&lt;/button&gt;
&lt;button class=&quot;btn btn-primary num-badge num-badge--text-primary num-badge--border-primary num-badge--font-awesome&quot; data-num-badge=&quot;&amp;#xf021;&quot;&gt;Primary button&lt;/button&gt;
&lt;a class=&quot;num-badge&quot; data-num-badge=&quot;9&quot;&gt;Basic Link&lt;/a&gt;;</pre>
</article>
<aside>
aside right
</aside>
</main>
<footer>
footer
</footer>

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com