Espacement flexible interrompu lors de la tentative de débordement de la balise HTML <pre><code> au lieu de l'habillage

Question

J'ai appliqué CSS au code à l'intérieur de la balise pre code 选择器，以便制作样式代码块，就像您在 GitHub 或其他地方看到的那样。我使用 Flexbox 进行布局，并且在“框”div 内并排有两个“面板”div，其中一个有一个代码块（这只是 <pre><code>), et le div "box" se trouve à l'intérieur du div "conteneur" principal.

Le CSS de base que j'ai est...

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

En raison de flex: 0.5, les deux panneaux doivent avoir la même largeur, mais le panneau de droite s'agrandit pour s'adapter au bloc au lieu que le bloc rétrécisse pour s'adapter au panneau.

Si je le fais dans pre code 上设置 white-space: pre-wrap , j'obtiens le comportement de mise en page souhaité, mais bien sûr, le code est renvoyé à la ligne, ce que je ne veux pas.

Bien sûr, si j'ajoute une largeur dédiée en utilisant white-space: pre 并向 pre 代码 , j'obtiens le comportement souhaité où le bloc de code a une barre de défilement horizontale. Je ne peux pas utiliser une largeur dédiée car j'ai besoin que le bloc puisse s'adapter à tous les panneaux à l'intérieur.

Pour une raison quelconque, le pre 代码 上设置 width: 100% ne fait rien du tout.

Pour m'assurer que je ne faisais pas autre chose quelque part qui a provoqué cette erreur, j'ai mis en place ce code pour confirmer mon problème (j'ai ajouté de la couleur d'arrière-plan et des marges pour rendre le conteneur visible) :

https://codepen.io/evprkr/pen/poKQXJr

Answer 1

Problème CSSvous faisant rencontrer des problèmes :

1. Il en va de même pour la première ligne de CSS .*, *:before, *:after { } 中，有一个很容易错过的初始 . （点）。因此 border-box 模型仅适用于 :before 和 :after 伪元素。显然，margin 和 padding.
2. toutes les .panel 祖先都没有设置 width valeurs afin que flexbox ne puisse pas contraindre les éléments enfants et grandisse jusqu'à l'infini.
3. flex: 0.5 （默认为 flex: 0.5 1 0%）显然没有效果，因为它没有宽度 flex-basis: 50%。在这两种情况下，pre 代码 都不会被触发溢出，因此不会显示可滚动框。我无法解释原因，但这一定是由于某些 W3C 规范造成的。不过，您声明的 .panel width: 50% Enfin résolu le problème.
4. Lors du redimensionnement du navigateur/codepen, changez margins 与各种元素和 gap 结合使用会产生看似意外的元素重叠。即使删除了上述初始 .

Solution

• Annonce 1) Supprimer .(cliquez)
• ad 2) Spécifiez .container 宽度：100% pour fournir une contrainte qui peut être utilisée par flexbox.
• ad 3) Supprimez .panel flex: 0.5 并指定 .panel 宽度: calc(50% - 0.5rem)。 calc(..) 是必需的，因为 gap 会增加 .panels 的总宽度，可能导致它们在调整大小时重叠。由于您的 ngap: 1rem 将 0.5rem 添加到两列中的每一列，因此需要从每列的 width en soustrayant la valeur.
4) avec ngap 一样，margin 会增加元素的总宽度，这需要您从元素宽度中减去左和/或右边距，以防止它们与其他元素重叠。避免在 CSS 中添加额外 calc(..) 的最简单方法是将元素的 margin 移动到其直接父元素的 padding . Ce n'est pas vrai dans tous les cas, mais dans ce cas, cela fonctionne bien sans modifier la présentation globale.

Bonus

Pour le comportement de réponse :

• permet .box d'envelopper ses éléments enfants
• Définissez une largeur minimale requise de .panel .panel 宽度 以强制 .box 包裹其子 .panels。在本例中我选择了 300px pour forcer
à envelopper ses .panel
• s enfants. Dans ce cas, j'ai choisi 300px.panel 元素增长到完整的 50%.

Cela doit être autorisé lorsqu'il n'est pas emballé

. hyphen

Aussi atez du texte pour améliorer la lisibilité...

Clip

*, *: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)"
}
        

🎜 🎜🎜