Jarak fleksibel rosak apabila cuba melimpahi teg <pre><code> HTML dan bukannya membalut

Question

Saya menggunakan CSS pada kod di dalam teg pre code 选择器，以便制作样式代码块，就像您在 GitHub 或其他地方看到的那样。我使用 Flexbox 进行布局，并且在“框”div 内并排有两个“面板”div，其中一个有一个代码块（这只是 <pre><code>), dan div "kotak" berada di dalam div "bekas" utama.

CSS asas yang saya ada ialah...

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

Disebabkan flex: 0.5, kedua-dua panel hendaklah sama lebarnya, tetapi panel kanan mengembang agar muat pada bongkah dan bukannya bongkah mengecut supaya muat dengan panel.

Jika saya melakukannya dalam pre code 上设置 white-space: pre-wrap , saya mendapat tingkah laku susun atur yang diingini, tetapi sudah tentu kod itu dibalut perkataan, yang saya tidak mahu.

Sudah tentu, jika saya menambah lebar khusus menggunakan white-space: pre 并向 pre 代码 saya mendapat gelagat yang diingini di mana blok kod mempunyai bar skrol mendatar. Saya tidak boleh menggunakan lebar khusus kerana saya memerlukan blok untuk memuatkan mana-mana panel di dalamnya.

Atas sebab tertentu, pre 代码 上设置 width: 100% tidak melakukan apa-apa langsung.

Untuk memastikan saya tidak melakukan sesuatu di tempat lain yang menyebabkan ralat ini, saya mengumpulkan kod ini untuk mengesahkan masalah saya (saya memang menambah beberapa warna latar belakang dan margin untuk menjadikan bekas itu kelihatan):

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

Answer 1

Isu CSSmenyebabkan anda menghadapi masalah:

1. Begitu juga dengan baris pertama CSS .*, *:before, *:after { } 中，有一个很容易错过的初始 . （点）。因此 border-box 模型仅适用于 :before 和 :after 伪元素。显然，margin 和 padding.
2. semua .panel 祖先都没有设置 width ​​nilai supaya flexbox tidak boleh mengekang elemen kanak-kanak dan akan berkembang hingga infiniti.
3. flex: 0.5 （默认为 flex: 0.5 1 0%）显然没有效果，因为它没有宽度 flex-basis: 50%。在这两种情况下，pre 代码 都不会被触发溢出，因此不会显示可滚动框。我无法解释原因，但这一定是由于某些 W3C 规范造成的。不过，您声明的 .panel width: 50% Akhirnya selesai masalah.
4. Apabila menukar saiz pelayar/pen kod, tukar margins 与各种元素和 gap 结合使用会产生看似意外的元素重叠。即使删除了上述初始 .

Penyelesaian

• Iklan 1) Padam .(klik)
• ad 2) Nyatakan .container 宽度：100% untuk memberikan kekangan yang boleh digunakan oleh flexbox.
• iklan 3) Padam .panel flex: 0.5 并指定 .panel 宽度: calc(50% - 0.5rem)。 calc(..) 是必需的，因为 gap 会增加 .panels 的总宽度，可能导致它们在调整大小时重叠。由于您的 ngap: 1rem 将 0.5rem 添加到两列中的每一列，因此需要从每列的 width dengan menolak nilai.
4) dengan ngap 一样，margin 会增加元素的总宽度，这需要您从元素宽度中减去左和/或右边距，以防止它们与其他元素重叠。避免在 CSS 中添加额外 calc(..) 的最简单方法是将元素的 margin 移动到其直接父元素的 padding . Ini tidak benar dalam semua kes, tetapi dalam kes ini ia berfungsi dengan baik tanpa mengubah reka letak keseluruhan.

Bonus

Untuk kelakuan tindak balas:

• membolehkan .box membalut elemen anaknya
• Tetapkan beberapa .lebar panel minimum yang diperlukan .panel 宽度 以强制 .box 包裹其子 .panels。在本例中我选择了 300px untuk memaksa
membalut .panel
• anaknya. Dalam kes ini saya memilih 300px.panel 元素增长到完整的 50%.

Ini perlu dibenarkan apabila tidak membungkus

. hyphen

Juga makan teks untuk meningkatkan kebolehbacaan...

Klip

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

🎜 🎜🎜