嘗試溢位 HTML <pre><code> 標籤而非換行時，Flex 間距會被破壞

Question

我將 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

Answer 1

CSS 問題導致您遇到問題：

1. 在 CSS 的第一行 .*, *:before, *:after { } 中，有一個很容易錯過的初始 . （點）。因此 border-box 模型只適用於 :before 和 :after 偽元素。顯然，margin 和 padding 也是如此。
2. 所有 .panel 祖先都沒有設定 width 值，這樣 flexbox 就無法約束子元素，並且會成長到無限大。
3. flex: 0.5 （預設為 flex: 0.5 1 0%）顯然沒有效果，因為它沒有寬度 flex-basis: 50%。在這兩種情況下，pre 程式碼 都不會被觸發溢出，因此不會顯示可捲動框。我無法解釋原因，但這一定是由於某些 W3C 規範造成的。不過，您聲明的 .panel width: 50% 最終解決了這個問題。
4. 在調整瀏覽器/codepen 大小時，將 margins 與各種元素和 gap 結合使用會產生看似意外的元素重疊。即使刪除了上述初始 .

#解決方案

• 廣告 1) 刪除 .（點）
• ad 2) 指定 .container 寬度：100% 為 flexbox 提供一個可使用的限制。
• ad 3) 刪除 .panel flex: 0.5 並指定 .panel 寬度: calc(50% - 0.5rem)。 calc(..) 是必要的，因為 gap 會增加 .panels 的總寬度，可能導致它們在調整大小時重疊。由於您的 ngap: 1rem 將 0.5rem 新增到兩列中的每一列，因此需要從每列的 width 中減去該值。
4) 與 ngap 一樣，margin 會增加元素的總寬度，這需要您從元素寬度中減去左和/或右邊距，以防止它們與其他元素重疊。避免在 CSS 中加入額外 calc(..) 的最簡單方法是將元素的 margin 移到其直接父元素的 padding 。並非在所有情況下都是如此，但在這種情況下，它在不改變整體佈局的情況下效果很好。

獎金

對於回應行為：

• 允許 .box 包裹其子元素
• 設定一些所需的最小 .panel 寬度 以強制 .box 包裹其子 .panels。在本例中我選擇了 300px。
• 這需要在不包裝時允許 .panel 元素增長到完整的 50%。

還有 hyphenate 文字以提高可讀性...

片段

*, *: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 {
    background: #d7d7db;
    display: block;
    overflow: auto;
    white-space: pre;
    padding: 1rem;

}

.container {
    background: #0197f4;
    display: flex;
    flex-direction: column;
    padding: 1rem;
    width: 100%;
}

.box {
    background: #ff7538;
    display: flex;
    flex-flow: row wrap;
    gap: 1rem;
    padding: 1rem;
}

.panel {
    background: #fff;
    display: flex;
    flex-direction: column;
    padding: 2rem;

    /* Adjust for parent gap value */
    width: calc(50% - 0.5rem);

    /* Allow to grow and wrap when less than 300px */
    flex: 1;
    min-width: min(300px, 100%);
}

.text { hyphens: auto }

    

        

            
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi accumsan mattis ullamcorper. Nulla tincidunt aliquam feugiat. Sed imperdiet tellus ligula, vehicula condimentum neque venenatis ut. Aenean varius elementum nulla, vehicula laoreet erat aliquam at. Nullam venenatis ex id tincidunt fringilla. Vivamus nec tellus sit amet leo tristique luctus. Cras elementum at diam at viverra. Phasellus tristique elementum velit id tincidunt. Nullam ullamcorper fringilla nulla sed ultricies.
        
  
        

            
function SomeFakeFunction(first_argument, second_argument) {
    if (first_argument > second_argument) {
        return "first argument is greater than second argument";
    } else if (first argument < second_argument) {
        return "first argument is less than second argument";
    }
    
    return "first argument and second argument are equal (or invalid but this is just filler code so i don't care to write anymore honestly)"
}