How do I create space between flex columns and prevent content from overflowing?

FiniteLooper
May 31, 2023
256 views
0 votes
2 Answers

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>

Answers

you seem to be over complicating this.

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

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>

Please signup or login to give your own answer.

Click here to cancel reply.