阻止内容扩展网格项

时间:2017-09-21 03:27:28

标签: css css3 firefox overflow css-grid

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

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

例如:



.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;
}

   <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;
&#13;
&#13;

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

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

0 个答案:

没有答案