Question

在 Firefox 中，当使用CSS Grid列定位元素并使用另一个更宽的元素添加到第一个元素内时，第一个元素的宽度会增加以容纳更广泛的后代

有没有人知道如何阻止这种行为，只是让后代元素按预期溢出父/祖先的框（和Chrome中一样）？

例如：

＆＃13;

.grid-layout {
  display:grid;
  grid-template-columns: repeat( 12, 1fr );
  grid-gap: 3vw;
  
  background-color: rgba( 255, 255, 100, 1);
  border-bottom: 5px solid #000;
  padding-bottom: 1em;
}

.grid-layout header, 
.grid-layout main {
  grid-column:3 / span 8;
}

header {
  background:#eee;
}

main {
  background: #aae;
}

pre {
  background-color: #eaa;
}

＆＃13;

   <section class="grid-layout">
    <header><h1>CSS Grid Items Expanding Strangely</h1>
      <p>In the section fo the document with a Yellow background, (the top half), we're using a Grid layout. The darker box below should be the same width as this box, but it's not, because it expands as the <code>&lt;pre&gt;</code> element inside it gets longer.</p>
    </header>
    
    <main>
      <p>I'm the block of content. Sometimes I'm really long, especially if I have some <code>&lt;pre&gt;</code> elements with long lines. I should be the same width as the grey box above me, but I have expanded t accomodate the width of the <code>&lt;pre&gt;</code> block that I contain.</p>
      
      <pre>This box is a <code>&lt;pre&gt;</code> element. It's super-long. Really long. Let's just write & write & write. Let's just write & write & write. Let's just write & write & write. Let's just write & write & write.</pre>
      
    </main>
    </section>

＆＃13;

这是一个带有上述示例的CodePen，以及一个不使用网格布局的类似重复部分：https://codepen.io/johnbeales/pen/JrKbQW

在包含块上设置overflow:hidden（上例中的<main>标记）修复了问题，（<pre>标记被切断，其他所有内容都被包装），但是我希望能够将一些子元素从盒子中移开，这样就无法选择。

阻止内容扩展网格项

0 个答案: