我將 CSS 應用到 pre code 選擇器，以便製作樣式程式碼區塊，就像您在 GitHub 或其他地方看到的那樣。我使用Flexbox 進行佈局，並且在「框」div 內並排有兩個「面板」div，其中一個有一個程式碼區塊（這只是<pre><code> 標籤內的程式碼） ，以及“box”div 位於主“container”div 內部。
我擁有的基本 CSS 是...
.*, *:before, *:after {
margin: 0;
padding: 0;
box-sizing: inherit;
}
html {
box-sizing: border-box;
}
body {
display: flex;
align-items: center;
justify-content: center;
}
pre code {
display: inline-block;
overflow: auto;
white-space: pre;
padding: 1rem;
margin: 1rem;
}
.container {
display: flex;
flex-direction: column;
margin: 1rem;
gap: 1rem;
}
.box {
display: flex;
flex-direction: row;
gap: 1rem;
}
.panel {
display: flex;
flex-direction: column;
flex: 0.5;
padding: 1rem;
}
由於 flex: 0.5，兩個面板的寬度應相等，但是右側面板會擴展以適合塊，而不是塊縮小以適合面板。
如果我在pre code 上設定white-space: pre-wrap ，我會得到所需的佈局行為，但當然程式碼是自動換行的，這是我不想要的。
white-space: pre 並向 pre 程式碼 新增專用寬度，我會得到所需的行為，其中程式碼區塊有一個水平滾動條。我無法使用專用寬度，因為我需要該區塊來適應其內部的任何面板。
出於某種原因，在 pre 程式碼 上設定 width: 100% 根本沒有任何作用。
為了確保我自己不會在其他地方做一些事情而導致此錯誤，我將這段程式碼放在一起以確認我的問題（我確實添加了一些背景顏色和邊距以使容器可見）：
https://codepen.io/evprkr/pen/poKQXJr
CSS 問題導致您遇到問題：
.*, *:before, *:after { }中，有一個很容易錯過的初始.（點）。因此border-box模型只適用於:before和:after偽元素。顯然，margin和padding也是如此。.panel祖先都沒有設定width值，這樣 flexbox 就無法約束子元素，並且會成長到無限大。flex: 0.5（預設為flex: 0.5 1 0%）顯然沒有效果，因為它沒有寬度flex-basis: 50%。在這兩種情況下，pre 程式碼都不會被觸發溢出，因此不會顯示可捲動框。我無法解釋原因，但這一定是由於某些 W3C 規範造成的。不過，您聲明的.panel width: 50%最終解決了這個問題。margins 與各種元素和gap結合使用會產生看似意外的元素重疊。即使刪除了上述初始.#解決方案
.（點）.container 寬度：100%為 flexbox 提供一個可使用的限制。.panel flex: 0.5並指定.panel 寬度: calc(50% - 0.5rem)。calc(..)是必要的，因為gap會增加.panels 的總寬度，可能導致它們在調整大小時重疊。由於您的ngap: 1rem將0.5rem新增到兩列中的每一列，因此需要從每列的width中減去該值。ngap一樣，margin會增加元素的總寬度，這需要您從元素寬度中減去左和/或右邊距，以防止它們與其他元素重疊。避免在 CSS 中加入額外calc(..)的最簡單方法是將元素的margin移到其直接父元素的padding。並非在所有情況下都是如此，但在這種情況下，它在不改變整體佈局的情況下效果很好。獎金
對於回應行為：
.box包裹其子元素.panel 寬度以強制.box包裹其子.panels。在本例中我選擇了300px。.panel元素增長到完整的50%。還有
hyphenate 文字以提高可讀性...片段