래핑 대신 HTML <pre><code> 태그를 오버플로하려고 하면 Flex 간격이 깨집니다.

Question

pre code 选择器，以便制作样式代码块，就像您在 GitHub 或其他地方看到的那样。我使用 Flexbox 进行布局，并且在“框”div 内并排有两个“面板”div，其中一个有一个代码块（这只是 <pre><code> 태그 안의 코드에 CSS를 적용했는데, "box" div가 기본 "container" div 안에 있습니다.

내가 가지고 있는 기본 CSS는...

으아아아

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. 브라우저/코드펜 크기를 조정할 때 변경하세요 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 너비 .panel 宽度 以强制 .box 包裹其子 .panels。在本例中我选择了 300px를 설정하여
하위 .panel
• 를 래핑하도록 합니다. 이 경우에는 300px.panel 元素增长到完整的 50%을 선택했습니다.

포장하지 않을 때 허용되어야 합니다

. hyphen

또한 텍스트를 먹어서 가독성을 높이세요...

클립

으아아아 으으으으