How to make space between flex columns and keep content from overflowing

I have a simple 2-column flex setup, and I want some margins between the columns. When I do this the 2nd column is pushed outside of the .flex-row. It becomes even more pronounced when I use a <pre> element inside it which doesn't seem to respect the max-width: 100% I've set on it.

So my question is two parts:

How can I use margins to space out my flex columns without overflowing?
How can I control the size of a <pre> (or other element) to fit its container?

*{
  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.
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>

Solution

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:

.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:

.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%;
}

<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>

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:

.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%;
}

<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>