使用< pre>来显示项目内容不减少 [英] Flex item with <pre> content not shrinking

问题描述

我有一个布局，需要固定宽度和中间内容的<aside>作为流体.一切都很好，但是如果您在中间内容中使用了<pre>元素，并且在<pre>之后没有水平滚动和flex元素溢出的情况下，将尝试将窗口调整为较小的分辨率. <pre>元素与overflow: auto一样是块元素.

I have a layout where I need to hold <aside> with fixed width and middle content as fluid. Everything is fine but if you used <pre> element inside middle content and you will try to resize window to small resolution after that is <pre> without horizontal scroll and flex element is overflowed. <pre> element is as block element, with 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>

推荐答案

您在pre元素上具有overflow: auto.

pre {
  overflow: auto;
  font-size: 87.5%;
  color: #dc3545;
}

它本身不会溢出.父进程溢出了.

It cannot overflow itself. It overflows the parent.

因此，将overflow移至article.

article {
  overflow: auto; /* new */
  flex-grow: 1;
  min-height: 100vh;
  background-color: lightgray;
}

修订版jsfiddle

问题和解决方案在此处进行了详细说明:

The problem and solution is explained in more detail here:

• 为什么弹性项目不能超过内容大小?

这篇关于使用< pre>来显示项目内容不减少的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！