Der Flex-Abstand ist fehlerhaft, wenn versucht wird, das HTML-Tag <pre><code> überlaufen zu lassen, anstatt es umzubrechen

Question

Ich habe CSS auf den Code innerhalb des pre code 选择器，以便制作样式代码块，就像您在 GitHub 或其他地方看到的那样。我使用 Flexbox 进行布局，并且在“框”div 内并排有两个“面板”div，其中一个有一个代码块（这只是 <pre><code>-Tags angewendet und das „Box“-Div befindet sich innerhalb des Haupt-„Container“-Div.

Das grundlegende CSS, das ich habe, ist...

.*, *: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;
}

Aufgrund von flex: 0.5 sollten beide Platten gleich breit sein, aber die rechte Platte dehnt sich aus, um in den Block zu passen, anstatt dass der Block schrumpft, um in die Platte zu passen.

Wenn ich es in pre code 上设置 white-space: pre-wrap mache, erhalte ich das gewünschte Layoutverhalten, aber natürlich ist der Code in Wortumbrüche unterteilt, was ich nicht möchte.

Wenn ich mit white-space: pre 并向 pre 代码 eine dedizierte Breite hinzufüge, erhalte ich natürlich das gewünschte Verhalten, bei dem der Codeblock eine horizontale Bildlaufleiste hat. Ich kann keine spezielle Breite verwenden, da ich den Block so benötige, dass alle darin enthaltenen Paneele hineinpassen.

Aus irgendeinem Grund macht das pre 代码 上设置 width: 100% überhaupt nichts.

Um sicherzustellen, dass ich nicht irgendwo etwas anderes getan habe, das diesen Fehler verursacht hat, habe ich diesen Code zusammengestellt, um mein Problem zu bestätigen (ich habe einige Hintergrundfarben und Ränder hinzugefügt, um den Container sichtbar zu machen):

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)"
}