Tips for creating space between flex columns without causing content to overflow

I am struggling with a simple 2-column flex setup where I want to add some margins between the columns. However, when I try to do this, the second column ends up overflowing outside of the .flex-row container. This issue becomes more prominent when I include a <pre> element inside the column as it doesn't seem to respect the max-width rule I have set for it.

My query consists of two parts:

  • How can I add margins to my flex columns without causing overflow?
  • Is there a way to control the size of a <pre> (or any other element) to make it 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>

htmlcssflexbox

Answer №1

To adjust the sizing of the .flex-col:last-child element within its parent, you can subtract its margin from its flex-basis property like so: calc(50% - 0.5rem). Additionally, you have the option to set white-space: pre-wrap or apply the width: 0; min-width: 100%; technique:

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

Give it a try:

.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 utilize grid in conjunction with gap, which may not have universal support but has been available for approximately 6 years:

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

Test it out:

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

Answer №2

It appears that you may be making this more complex than necessary.

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to integrate a chips feature in Angular 4 using Typescript

Struggling to incorporate a chips component into my Angular web application, which comprises Typescript, HTML, and CSS files. After grappling with this for weeks without success, I have yet to find the right solution. To review my current code, you can a ...

htmlcssangulartypescript

Exploring the process of passing parameters in Material-UI React styled components

Recently, I developed a new component const CategoryDialog = (props) => { const classes = useStyles(); console.log(props); return ( <div> <Dialog fullScreen open={props.dilaogOpenProp} TransitionCompone ...

javascriptcssreactjsmaterial-ui

How can I incorporate a .shtml file into a .php webpage?

Is there a way to include a .shtml file within a .php page? I know it can be done, as I have successfully achieved this in the past (although I cannot remember the exact code). Can someone please assist me with this? ...

phphtmlshtml

What are the best practices for implementing the CSS id selector?

As someone new to web development, I am facing an issue with my code where the CSS id selector is not functioning as expected: li { border: 3px solid red; } h3 { background: green; } #special { color: green; } <h3>Todo List</h3> < ...

htmlcss

Is there a way to alter the footer across all my pages using just one document?

I'm having trouble coming up with a title for my question, so please bear with me. I am working on a Bootstrap website and I want to create a consistent navbar and footer across all pages without duplicating the code in each document. How can I achiev ...

htmlcsstwitter-bootstrap

Refreshing the page after executing a MySQL UPDATE statement

There seems to be a problem with the page refreshing faster than the query execution. I have an UPDATE query to update my database with values in my fields, triggered by pushing a button. However, upon clicking the button (which refreshes the website), th ...

phphtmlmysql

What is the best way to prioritize List Items over menu items in the front?

Sorry if the title is unclear, let me clarify with some images. First, here is how the navigation bar looks in full window view: Now, this is what happens when I decrease the screen resolution: The items list seems to be hiding behind the menu items. Ho ...

htmlcss

How to Reference a Local File in PHP using Zend Framework for jQuery's .Load Function

I'm currently working on a PHP Zend framework website and I'm trying to link to a local file. The file structure is as follows: public_html/application/views/index/filename1.phtml Within filename1.phtml, I want to make a jQuery call to load a ...

phpjqueryhtmlzend-framework

Adding to a webpage's URL with PHP prior to rendering the content

Currently, I am investigating how to add a random query string at the end of a URL when someone visits my page for the first time. Let's say an individual goes to my website at www.example.com. If everything proceeds as planned, they will land on my i ...

phphtmlurl

Clean URL system inspired by Drupal

I've been tasked with revamping some older websites. These sites were built in a traditional manner, with each page having its own PHP file containing header, content, script, and footer. Now my client wants to refresh the look of all the pages, so I& ...

phphtmlurldrupal

Preventing clashes in namespaces while incorporating Bootstrap into a plugin for WordPress

After creating a WordPress plugin, I am considering revamping its layout with the help of bootstrap CSS and js. However, I have encountered issues in the past due to conflicting CSS naming conventions. I want to ensure that there are no namespace conflicts ...

csswordpresstwitter-bootstrapplugins

A guide on dynamically accessing an image from the src directory using props in a Vite + React application

export default function Card(props) { return ( <card> <img className={cardCss.card__img} src={`../assets/imgs/card/${props.img}`} alt="" /> <div className={cardCss.card__stats}> ...

cssreactjsreact-propsdynamic-importvite-reactjs

What is the best way to incorporate a Bootstrap spinner icon in the center of a webpage's background?

Every time my HTML page reloads, I want to display a background loader icon. Although I have tried using the Bootstrap spinner icon, I'm facing difficulties in positioning it at the center of the page. <html> <style> .overlay { back ...

htmlcss

Unexpected Firebug issue when interacting with radio button

Could someone help me understand a minor issue I've encountered? Here is an example of an HTML document: <html> <head> <title></title> <style> body {font-family: Arial;} </style> </head> ...

htmlcssfirefoxfirebug

Is it possible to run a query directly from HTML code?

I am trying to retrieve data from my table that includes two columns: Judul, Isi. <head><link type="text/css" rel="stylesheet" href="addnewpage.css"/</head> <body> <?php $k = mysqli_connect("local ...

phphtmlmysql

Possible rewrite: "Unable to use jQuery to add elements to data fetched through AJAX requests."

I am looking to add a button to copy code inside every div that has a class starting with language. The code is functioning properly, however, after attempting to retrieve data from the database using Ajax, the button no longer appears in the div as it did ...

javascriptphpjqueryhtmlajax

What is the relationship between three.js transforms and CSS3 3D-transforms?

I am developing a unique open-source tool for exploring and visualizing the complexities of human anatomy. At the center of this tool is a dynamic 'chessboard' that occupies the majority of the screen. As you drag the board, various CSS3 3D-tran ...

javascriptcss3dthree.jstransform

The Gulp task is not being recognized when I open the project in Visual Studio Code

Whenever I open gulp, I encounter an error related to minifying css and js files using gulp tasks. Despite my efforts to find a solution, the problem remains unresolved. Error Message: assert.js:374 throw err; ^ AssertionError [ERR_ASSERTION]: Task fu ...

cssoptimizationgulpminify

Place the cursor at the conclusion of the text box

I am working on creating a user input form for chat messaging and I need some help. Here is the HTML-code snippet that I am currently using: HTML-code Currently, when the user presses ENTER, I retrieve the text from the textbox and save it. If the user ...

angularhtmltypescripttextboxchat

Tips for Re-positioning the Manage Password Window in a Browser Using CSS

I am facing an issue with the Caps Lock key indication on my login page. When the Caps Lock key is on, a tooltip should be displayed below the password field. However, when the browser's "manage passwords" bubbles are shown, the tooltip gets hidden be ...

javascripthtmlcssextjsbrowser