预格式化的子内容会拉伸父网格单元格

问题描述 投票：0回答：1

我有一个 CSS 网格元素，其中一个单元格包含一些预先格式化的代码 (

<pre><code>...</code></pre>
)。此代码可能有一些长行，较小的屏幕宽度可能无法容纳整行。但是，我不想换行，因为这可能会弄乱某些代码，例如：

console.log('test'); // Log the me
ssage


<pre>
和 
<code>
自动执行此操作，但它们不应用滚动条。相反，内容会溢出父级。为了解决这个问题，我尝试添加 
pre { overflow-x: auto; }
，它可以显示滚动条。然而，这仍然会拉伸任何父网格单元以适应底层的长
<code>
块，即使它包含在固定宽度的
<pre>
标签中，这对我来说毫无意义。

请参阅我重现此问题的最小示例。

#grid {
  display: grid;
  /* Should split the page in half. */
  grid-template: 'left right' 100% / 1fr 1fr;
}

#left {
  grid-area: left;
}

#right {
  grid-area: right;
}

pre {
  /* For long content, horizontal scrollbar should appear. */
  overflow-x: auto;

  /* If we forcibly shorten `pre` width, the scrollbar appears, but grid is still stretched by the `code` element. */
  /* width: 50%; */
}

#tall {
    border: 1px solid red;
    height: 1000px;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Home</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div id="grid">
      <div id="left">
        <div>Some content on the left.</div>
        <div>This should scroll with the single vertical scrollbar. </div>
      </div>
      <div id="right">
        <pre>
          <code>Some very very very very very very very very very very very very very very very very very very very long code content.</code>
        </pre>
        
        <div id="tall">Some very tall content</div>
      </div>
    </div>
  </body>
</html>

我尝试了一个具有两列大小相等的网格的最小示例。其中一列包含一个长 

<code>
标签。对于足够大以适应内容的屏幕来说，这很好，但对于较小的屏幕尺寸，
<code>
标签将其单元格拉伸到屏幕的一半之外，并且网格也会增长到其容器之外，并强制在网格上出现水平滚动条。即使我在 
overflow-x: auto;
上强制使用 
<pre>
，
<code>
标签仍然会根据需要拉伸网格。另一列缩小以进行补偿，几乎整个宽度都由这个 
<code>
标签主导。这是非常不可取的，但我找不到解决方法。在这个例子中我想要的是网格“总是”在两列之间按 50/50 分割。如果屏幕太小，无法容纳较长的 <code> 文本，则水平滚动条应出现在 
<pre>
或 
<code>
标签上，并且网格应 
always
与视口宽度匹配，并且 never 具有滚动条。 这张图片有望演示当视口宽度太小时会发生什么。两列布局不再从中间分开，并且滚动条出现在网格底部（两个红色标记）。相反，我试图将分割保持在网格中间，并将滚动条

only

放在右列的代码内容下方。

Inspect 元素显示

<pre>

标签的大小正确。如果我对它应用 

width: 50%;
，我可以看到它比它包含的网格单元小。然而，
<code>
标签始终延伸到其整行长度。我认为这是预料之中的，但是我认为 
overflow-x: auto;
标签上的 
<pre>
应该避免该长度推动网格单元。我在这里错过了什么吗？我尝试过以我能想到的多种方式摆弄 
width
、
max-width
、
overflow-x
和 
white-space
。
我还成功地
用flexbox重现了这个
，所以我不认为它是特定于网格的。这是 <code>、
<pre>
 或 
white-space: pre;
 的怪癖吗？
    





    
    html
    
    css
    
    css-grid
    
    
1个回答

    

      
      
      

        

          

            

              
0
投票

              
            

          

        

        
<pre>
 来设置 
overflow: auto
 标签的样式，而是使用它来设置 
#right
 单元格的样式。




#grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

#left {
  border: 1px solid red;
}

#right {
  border: 1px solid lime;
  overflow: auto;
}


<div id="grid">
  <div id="left">Some content on the left.</div>
  <div id="right">
    <pre>
      <code>Scroll me sideways. Some very very very very very very very very very very very very very very very very very very very long code content.</code>
    </pre>
  </div>
</div>





    



      

      
    

  

  

    
最新问题


  





  

    © www.soinside.com 2019 - 2024. All rights reserved.