问题

我有一个简单的2列flex布局，并且我想在列之间添加一些边距。但是当我这样做时，第二列被推出了.flex-row之外。当我在其中使用一个<pre>元素时，这种情况变得更加明显，它似乎不遵守我设置的max-width: 100%。

所以我的问题有两个部分：

• 如何使用边距来调整我的flex列的间距，而不会溢出？
• 如何控制<pre>（或其他元素）的大小以适应其容器？

*{
  box-sizing: border-box;
}

.container {
  background: #F5F5F5;
  border: 1px solid #CCC;
  margin: 0 auto;
  padding: 0.5rem;
  width: 500px;
}

.flex-row {
  display: flex;
  background: rgba(255,0,0, 0.1);
  padding: 0.5rem 0;
}

.flex-col {
  flex-basis: 50%;
  flex-grow: 0;
  flex-shrink: 0;
  background: rgba(0,255,0, 0.1);
}

.flex-row .flex-col:last-child {
  margin-left: 0.5rem;
}

pre {
  border: 1px solid red;
  padding: 0.5rem;
  overflow-y: scroll;
  max-width: 100%;
}

<div class="container">
  <p>容器中的一些文本</p>
  <div class="flex-row">
    <div class="flex-col">
      <p>列中的一些文本。Lorem ipsum dolor, sit amet consectetur adipisicing elit. Necessitatibus ea sint placeat deserunt, aut dolor et dolorum itaque, consequuntur minima quibusdam neque? Sequi eaque unde repudiandae, excepturi quibusdam maiores incidunt.</p>
    </div>
    <div class="flex-col">
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iste recusandae, repellendus ipsum accusantium rerum dolor fugiat, aperiam harum asperiores, vel debitis. Quidem modi sapiente enim. Ipsam saepe blanditiis ipsa id?</p>
    </div>
  </div>
</div>

<hr>

<div class="container">
  <p>容器中的一些文本</p>
  <div class="flex-row">
    <div class="flex-col">
      <p>列中的一些文本。Lorem ipsum dolor, sit amet consectetur adipisicing elit. Necessitatibus ea sint placeat deserunt, aut dolor et dolorum itaque, consequuntur minima quibusdam neque? Sequi eaque unde repudiandae, excepturi quibusdam maiores incidunt.</p>
    </div>
    <div class="flex-col">
      <pre>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iste recusandae, repellendus ipsum accusantium rerum dolor fugiat, aperiam harum asperiores, vel debitis. Quidem modi sapiente enim. Ipsam saepe blanditiis ipsa id?</pre>
    </div>
  </div>
</div>

*{
  box-sizing: border-box;
}

.container {
  background: #F5F5F5;
  border: 1px solid #CCC;
  margin: 0 auto;
  padding: 0.5rem;
  width: 500px;
}

.flex-row {
  display: flex;
  background: rgba(255,0,0, 0.1);
  padding: 0.5rem 0;
}

.flex-col {
  flex-basis: 50%;
  flex-grow: 0;
  flex-shrink: 0;
  background: rgba(0,255,0, 0.1);
}

.flex-row .flex-col:last-child {
  margin-left: 0.5rem;
}

pre {
  border: 1px solid red;
  padding: 0.5rem;
  overflow-y: scroll;
  max-width: 100%;
}

<div class="container">
  <p>Some text in a container</p>
  <div class="flex-row">
    <div class="flex-col">
      <p>Some text in a column. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Necessitatibus ea sint placeat deserunt, aut dolor et dolorum itaque, consequuntur minima quibusdam neque? Sequi eaque unde repudiandae, excepturi quibusdam maiores incidunt.</p>
    </div>
    <div class="flex-col">
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.
      Iste recusandae, repellendus ipsum accusantium rerum dolor fugiat, aperiam harum asperiores, vel debitis.
      Quidem modi sapiente enim. Ipsam saepe blanditiis ipsa id?</p>
    </div>
  </div>
</div>

<hr>

<div class="container">
  <p>Some text in a container</p>
  <div class="flex-row">
    <div class="flex-col">
      <p>Some text in a column. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Necessitatibus ea sint placeat deserunt, aut dolor et dolorum itaque, consequuntur minima quibusdam neque? Sequi eaque unde repudiandae, excepturi quibusdam maiores incidunt.</p>
    </div>
    <div class="flex-col">
      <pre>Lorem, ipsum dolor sit amet consectetur adipisicing elit.

答案1

得分: 2

首先，从.flex-col:last-child的flex-basis中减去边距，以使其适应其父元素：calc(50% - 0.5rem)。然后，要么设置white-space: pre-wrap，要么使用width: 0; min-width: 100%;的技巧：

.flex-row .flex-col:last-child {
  flex-basis: calc(50% - 0.5rem);
  margin-left: 0.5rem;
}

pre {
  /* 要么 */
  white-space: pre-wrap;

  /* 要么 */
  width: 0;
  min-width: 100%;
}

你可以尝试这样做：

<!-- 开始代码片段: js 隐藏: true -->

<!-- 语言: lang-css -->
.flex-row .flex-col:last-child {
  flex-basis: calc(50% - 0.5rem);
  margin-left: 0.5rem;
}

pre {
  width: 0;
  min-width: 100%;
}

/* 原始样式 */
* {
  box-sizing: border-box;
}

.container {
  background: #F5F5F5;
  border: 1px solid #CCC;
  margin: 0 auto;
  padding: 0.5rem;
  width: 500px;
}

.flex-row {
  display: flex;
  background: rgba(255, 0, 0, 0.1);
  padding: 0.5rem 0;
}

.flex-col {
  flex-basis: 50%;
  flex-grow: 0;
  flex-shrink: 0;
  background: rgba(0, 255, 0, 0.1);
}

pre {
  border: 1px solid red;
  padding: 0.5rem;
  overflow-y: scroll;
  max-width: 100%;
}

<!-- 语言: lang-html -->
<div class="container">
  <p>容器中的一些文本</p>
  <div class="flex-row">
    <div class="flex-col">
      <p>列中的一些文本。Lorem ipsum dolor, sit amet consectetur adipisicing elit. Necessitatibus ea sint placeat deserunt, aut dolor et dolorum itaque, consequuntur minima quibusdam neque? Sequi eaque unde repudiandae, excepturi quibusdam maiores
        incidunt.</p>
    </div>
    <div class="flex-col">
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iste recusandae, repellendus ipsum accusantium rerum dolor fugiat, aperiam harum asperiores, vel debitis. Quidem modi sapiente enim. Ipsam saepe blanditiis ipsa id?</p>
    </div>
  </div>
</div>

<hr>

<div class="container">
  <p>容器中的一些文本</p>
  <div class="flex-row">
    <div class="flex-col">
      <p>列中的一些文本。Lorem ipsum dolor, sit amet consectetur adipisicing elit. Necessitatibus ea sint placeat deserunt, aut dolor et dolorum itaque, consequuntur minima quibusdam neque? Sequi eaque unde repudiandae, excepturi quibusdam maiores
        incidunt.</p>
    </div>
    <div class="flex-col">
      <pre>Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Iste recusandae, repellendus ipsum accusantium rerum dolor fugiat,
aperiam harum asperiores, vel debitis.
Quidem modi sapiente enim. Ipsam saepe blanditiis ipsa id?</pre>
    </div>
  </div>
</div>

<!-- 结束代码片段 -->

或者，你可以使用grid与gap结合，虽然支持程度不如广泛使用，但已经存在约6年：

.flex-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

你可以尝试这样做：

<!-- 开始代码片段: js 隐藏: true -->

<!-- 语言: lang-css -->
.flex-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

pre {
  width: 0;
  min-width: 100%;
}

/* 原始样式 */
* {
  box-sizing: border-box;
}

.container {
  background: #F5F5F5;
  border: 1px solid #CCC;
  margin: 0 auto;
  padding: 0.5rem;
  width: 500px;
}

.flex-row {
  background: rgba(255, 0, 0, 0.1);
  padding: 0.5rem 0;
}

.flex-col {
  background: rgba(0, 255, 0, 0.1);
}

pre {
  border: 1px solid red;
  padding: 0.5rem;
  overflow-y: scroll;
  max-width: 100%;
}

<!-- 语言: lang-html -->
<div class="container">
  <p>容器中的一些文本</p>
  <div class="flex-row">
    <div class="flex-col">
      <p>列中的一些文本。Lorem ipsum dolor, sit amet consectetur adipisicing elit. Necessitatibus ea sint placeat deserunt, aut dolor et dolorum itaque, consequuntur minima quibusdam neque? Sequi eaque unde repudiandae, excepturi quibusdam maiores
        incidunt.</p>
    </div>
    <div class="flex-col">
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iste recusandae, repellendus ipsum accusantium rerum dolor fugiat, aperiam harum asperiores, vel debitis. Quidem modi sapiente enim. Ipsam saepe blanditiis ipsa id?</p>
    </div>
  </div>
</div>

<hr>

<div class="container">
  <p>容器中的一些文本</p>
  <div class="flex-row">
    <div class="flex-col">
      <p>列中的一些文本。Lorem ipsum dolor, sit amet consectetur adipisicing elit. Necessitatibus ea sint placeat deserunt, aut dolor et dolorum itaque, consequuntur minima quibusdam neque? Sequi eaque unde repudiandae, excepturi quibusdam maiores
        incidunt.</p>
    </div>
    <div class="flex-col">
      <pre>Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Iste recusandae, repellendus ipsum accusantium rerum dolor fug

<details>
<summary>英文:</summary>

First, subtract the margin of `.flex-col:last-child` from its `flex-basis` so that it fits into its parent: `calc(50% - 0.5rem)`. Then, either set `white-space: pre-wrap` or use the `width: 0; min-width: 100%;` trick:

```css
.flex-row .flex-col:last-child {
  flex-basis: calc(50% - 0.5rem);
  margin-left: 0.5rem;
}

pre {
  /* Either */
  white-space: pre-wrap;

  /* or */
  width: 0;
  min-width: 100%;
}

Try it:

<!-- begin snippet: js hide: true -->

<!-- language: lang-css -->

.flex-row .flex-col:last-child {
flex-basis: calc(50% - 0.5rem);
margin-left: 0.5rem;
}
pre {
width: 0;
min-width: 100%;
}
/* Original styles */
* {
box-sizing: border-box;
}
.container {
background: #F5F5F5;
border: 1px solid #CCC;
margin: 0 auto;
padding: 0.5rem;
width: 500px;
}
.flex-row {
display: flex;
background: rgba(255, 0, 0, 0.1);
padding: 0.5rem 0;
}
.flex-col {
flex-basis: 50%;
flex-grow: 0;
flex-shrink: 0;
background: rgba(0, 255, 0, 0.1);
}
pre {
border: 1px solid red;
padding: 0.5rem;
overflow-y: scroll;
max-width: 100%;
}

<!-- language: lang-html -->

<div class="container">
<p>Some text in a container</p>
<div class="flex-row">
<div class="flex-col">
<p>Some text in a column. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Necessitatibus ea sint placeat deserunt, aut dolor et dolorum itaque, consequuntur minima quibusdam neque? Sequi eaque unde repudiandae, excepturi quibusdam maiores
incidunt.</p>
</div>
<div class="flex-col">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iste recusandae, repellendus ipsum accusantium rerum dolor fugiat, aperiam harum asperiores, vel debitis. Quidem modi sapiente enim. Ipsam saepe blanditiis ipsa id?</p>
</div>
</div>
</div>
<hr>
<div class="container">
<p>Some text in a container</p>
<div class="flex-row">
<div class="flex-col">
<p>Some text in a column. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Necessitatibus ea sint placeat deserunt, aut dolor et dolorum itaque, consequuntur minima quibusdam neque? Sequi eaque unde repudiandae, excepturi quibusdam maiores
incidunt.</p>
</div>
<div class="flex-col">
<pre>Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Iste recusandae, repellendus ipsum accusantium rerum dolor fugiat,
aperiam harum asperiores, vel debitis.
Quidem modi sapiente enim. Ipsam saepe blanditiis ipsa id?</pre>
</div>
</div>
</div>

<!-- end snippet -->

Alternatively, you can use grid along with gap, which is less widely supported but, still, has been around for about 6 years:

.flex-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

Try it:

<!-- begin snippet: js hide: true -->

<!-- language: lang-css -->

.flex-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.5rem;
}
pre {
width: 0;
min-width: 100%;
}
/* Original styles */
* {
box-sizing: border-box;
}
.container {
background: #F5F5F5;
border: 1px solid #CCC;
margin: 0 auto;
padding: 0.5rem;
width: 500px;
}
.flex-row {
background: rgba(255, 0, 0, 0.1);
padding: 0.5rem 0;
}
.flex-col {
background: rgba(0, 255, 0, 0.1);
}
pre {
border: 1px solid red;
padding: 0.5rem;
overflow-y: scroll;
max-width: 100%;
}

<!-- language: lang-html -->

<div class="container">
<p>Some text in a container</p>
<div class="flex-row">
<div class="flex-col">
<p>Some text in a column. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Necessitatibus ea sint placeat deserunt, aut dolor et dolorum itaque, consequuntur minima quibusdam neque? Sequi eaque unde repudiandae, excepturi quibusdam maiores
incidunt.</p>
</div>
<div class="flex-col">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iste recusandae, repellendus ipsum accusantium rerum dolor fugiat, aperiam harum asperiores, vel debitis. Quidem modi sapiente enim. Ipsam saepe blanditiis ipsa id?</p>
</div>
</div>
</div>
<hr>
<div class="container">
<p>Some text in a container</p>
<div class="flex-row">
<div class="flex-col">
<p>Some text in a column. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Necessitatibus ea sint placeat deserunt, aut dolor et dolorum itaque, consequuntur minima quibusdam neque? Sequi eaque unde repudiandae, excepturi quibusdam maiores
incidunt.</p>
</div>
<div class="flex-col">
<pre>Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Iste recusandae, repellendus ipsum accusantium rerum dolor fugiat,
aperiam harum asperiores, vel debitis.
Quidem modi sapiente enim. Ipsam saepe blanditiis ipsa id?</pre>
</div>
</div>
</div>

<!-- end snippet -->

答案2

得分: 1

你似乎把这个问题复杂化了。

.flex-row {
  display: flex;
  width: 500px;
  border: solid 1px red;
  margin: 0 auto;
}

.flex-col {
  width: 45%;
}

.c1 {
  margin-right: 5%;
  border: solid 1px green;
}

.c2 {
  margin-left: 5%;
  border: solid 1px blue;
}

<div class="container">
  <p>容器中的一些文本</p>
  <div class="flex-row">
    <div class="flex-col c1">
      <p>
        列中的一些文本。Lorem ipsum dolor, sit amet consectetur adipisicing elit.
        Necessitatibus ea sint placeat deserunt, aut dolor et dolorum itaque, consequuntur
        minima quibusdam neque? Sequi eaque unde repudiandae, excepturi quibusdam maiores
        incidunt.
      </p>
    </div>
    <div class="flex-col c2">
      <p>
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iste recusandae,
        repellendus ipsum accusantium rerum dolor fugiat, aperiam harum asperiores, vel
        debitis. Quidem modi sapiente enim. Ipsam saepe blanditiis ipsa id?
        Iste recusandae, repellendus ipsum accusantium rerum dolor fugiat, aperiam harum
        asperiores, vel debitis. Quidem modi sapiente enim. Ipsam saepe blanditiis ipsa id?
      </p>
    </div>
  </div>
</div>

.flex-row{
display:flex;
width:500px;
border:solid 1px red;
margin:0 auto;}
.flex-col{
width:45%;
}
.c1{
margin-right:5%;
border:solid 1px green;}
.c2{
margin-left:5%;
border:solid 1px blue;}

<div class="container">
<p>Some text in a container</p>
<div class="flex-row">
<div class="flex-col c1">
<p>Some text in a column. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Necessitatibus ea sint placeat deserunt, aut dolor et dolorum itaque, consequuntur minima quibusdam neque? Sequi eaque unde repudiandae, excepturi quibusdam maiores incidunt.</p>
</div>
<div class="flex-col c2">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Iste recusandae, repellendus ipsum accusantium rerum dolor fugiat, aperiam harum asperiores, vel debitis.
Quidem modi sapiente enim. Ipsam saepe blanditiis ipsa id?
Iste recusandae, repellendus ipsum accusantium rerum dolor fugiat, aperiam harum asperiores, vel debitis.
Quidem modi sapiente enim. Ipsam saepe blanditiis ipsa id?
</p>
</div>
</div>
</div>