CSS flexbox completely collapses all child elements that are empty

Is there a way to collapse the empty "col" divs in this html structure while keeping the content divs equally sized (two columns in this case)?

* {
  box-sizing: border-box;
}

.container {
  border: 1px dashed rgba(255, 0, 0, .5);
  background-color: beige;
  padding: 20px 10px;
  width: 500px;
}

.row {
  border: 1px dashed rgba(0, 0, 255, .5);
  display: flex;
}

.col {
  flex: 1 1 auto;
  min-width: 0;
}

.content {
  border: 1px dashed rgba(0, 0, 0, .25);
  padding: 0 10px;
  width: 100%;
}
<section class="container">
  <div class="row">
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col">
      <p class="content">Foo</p>
    </div>
    <div class="col"></div>
    <div class="col">
      <p class="content">Bar</p>
    </div>
    <div class="col"></div>
  </div>
</section>

htmlcssflexbox

Answer №1

To target the empty elements with the .col class, you can utilize the :empty pseudo class.

In this case, the flex attribute is being modified to allow the elements to shrink. Alternatively, you could also apply display: none, or enforce max-width: 0, among other options.

* {
  box-sizing: border-box;
}

.container {
  border: 1px dashed rgba(255, 0, 0, .5);
  background-color: beige;
  padding: 20px 10px;
  width: 500px;
}

.row {
  border: 1px dashed rgba(0, 0, 255, .5);
  display: flex;
}

.col {
  flex: 1 1 auto;
  min-width: 0;
}

.col:empty {
  flex: 0 1 0;
}

.content {
  border: 1px dashed rgba(0, 0, 0, .25);
  padding: 0 10px;
  width: 100%;
}
<section class="container">
  <div class="row">
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col">
      <p class="content">Foo</p>
    </div>
    <div class="col"></div>
    <div class="col">
      <p class="content">Bar</p>
    </div>
    <div class="col"></div>
  </div>
</section>

Answer №2

The issue was successfully resolved by adjusting the content width to 100vw with a maximum width of 100%. However, it should be noted that this solution is not compatible with any version of Internet Explorer.

* {
  box-sizing: border-box;
}

.container {
  border: 1px dashed rgba(255, 0, 0, .5);
  background-color: beige;
  padding: 20px 10px;
  width: 500px;
}

.row {
  border: 1px dashed rgba(0, 0, 255, .5);
  display: flex;
}

.col {
  flex: 1 1 auto;
  min-width: 0;
}

.content {
  border: 1px dashed rgba(0, 0, 0, .25);
  padding: 0 10px;
  width: 100vw;
  max-width: 100%;
}
<section class="container">
  <div class="row">
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col">
      <p class="content">Foo</p>
    </div>
    <div class="col"></div>
    <div class="col">
      <p class="content">Bar</p>
    </div>
    <div class="col"></div>
  </div>
</section>

Answer №3

One possible approach is to utilize classic table display properties for compatibility with Internet Explorer.

* {
  box-sizing: border-box;
}

.container {
  border: 1px dashed rgba(255, 0, 0, .5);
  background-color: beige;
  padding: 20px 10px;
  width: 500px;
  display: table;
}

.row {
  border: 1px dashed rgba(0, 0, 255, .5);
  display: table-row;
}

.col {
  display: table-cell;
  min-width: 0;
}

.content {
  border: 1px dashed rgba(0, 0, 0, .25);
  padding: 0 10px;
  width: 100%;
}
<section class="container">
  <div class="row">
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col">
      <div class="content">Foo</div>
    </div>
    <div class="col"></div>
    <div class="col">
      <div class="content">Bar</div>
    </div>
    <div class="col"></div>
  </div>
</section>

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

AngularJS: When the expression is evaluated, it is showing up as the literal {{expression}} text instead of

Resolved: With the help of @Sajeetharan, it was pinpointed that the function GenerateRef was faulty and causing the issue. Although this is a common query, I have not had success in resolving my problem with displaying {{}} to show the outcome. I am atte ...

htmlangularjsweb-applications

What is the best way to make the Nav bar overlap instead of shifting content to the right?

Is there a way to open the nav bar and have it overlap on the right without pushing content to the right? I tried experimenting with position and z-index, but it didn't work. Thank you! Link <div id="mySidebar" class="sidebar" ...

javascripthtmlcssbootstrap-4nav

Viewing a Google Charts graph upon the loading of a web page

Utilizing the Google Charts library, I have incorporated a graphic on my web page that is dynamically added using AJAX into a <div> element. To display the graph when the page loads, I have written the following code: <script type="text/ ...

javascripthtmlajaxgoogle-visualization

Any recent guide on how to use the flexbox module?

As the Flexible Box Layout module spec continues to evolve, some browsers have implemented multiple versions with varying syntaxes. Despite efforts to find current tutorials, many sources warn of outdated information. In light of potential future changes, ...

cssflexbox

Adapting iFrame height to accommodate fluctuating content height in real time (details included)

I have an embedded iframe that contains a form with jQuery validation. When errors occur, the content height of the iframe increases dynamically. Below is the script I use to adjust the height of my iframe based on its content: function doIframe(){ o = d ...

javascriptjqueryhtmliframe

Show dynamic HTML Dropdowns with nested JSON data

I've been racking my brains trying to implement this specific functionality in the UI using a combination of HTML5, Bootstrap, CSS, and JavaScript. My goal is to create dropdown menus in the UI by parsing JSON input data. Please Note: The keys withi ...

javascripthtmljsondynamicdropdown

Revamping Tab Styles with CSS

Currently, I am working on a mat tab project. The code snippet I am using is: <mat-tab-group> <mat-tab [label]="tab" *ngFor="let tab of lotsOfTabs">Content</mat-tab> </mat-tab-group> If you want to see the liv ...

htmlcssangularangular-materialangular9

How can I specify the exact width for Bootstrap 3 Progress Bars?

I have a single page that displays all my files in a table format, and I also have the count of open and closed files. My goal is to represent the percentage of closed files using a progress bar. The width of the progress bar should change based on this p ...

javascripthtmlcsstwitter-bootstrap-3

I am looking for guidance on how to convert a FlexDashboard file into an HTML format. Can anyone provide instructions

I recently created a FlexDashboard for someone else and they've requested it in HTML format to incorporate it into their web system like WordPress. Since I don't have access to their WordPress system, I need to provide them with an HTML file inst ...

htmlrflexdashboard

How can I fix the issue with border-radius not displaying correctly in tcpdf and how can I ensure the text is shown on

Currently, I am utilizing tcpdf to showcase a circle and text together in a PDF. Despite my attempts with the code below, the border-radius attribute is not functioning as expected: Upon implementation, I obtained the following result: https://i.sstatic. ...

htmlcsspdftcpdfborder-radius

Unable to concentrate on HTML input elements

TL;DR just click on this link I'm having a problem with my input elements - they seem to be on strike and not working properly. I've simplified the code to focus on the variables, and while I found some solutions that work, I believe there' ...

htmlcssinput

Alter the URL path with the help of jQuery

I developed a website with content in two different languages, each stored in separate folders named en and bn. My goal is to toggle between these folders when clicking on an href element using jQuery. <a class="eng_link " style="" href="#"> English ...

jqueryhtml

Refreshing SQL Server data using an HTML form

In the table below: <table id="skuTable" role="grid"> <thead> <th class="skuRow">Order</th> <th>Fab. Date</th> <th class="skuRow">Norder</th> <th>Color</th> ...

javascriptphphtmlsql-serverajax

Incorrect font display occurring exclusively on Windows Chrome

There seems to be an issue with the Google served Open Sans font on my website, specifically with Win Chrome where the font appears thick and ugly. However, when I tested it on Win FF and Safari, everything seemed fine. The font also displays correctly on ...

htmlcssgoogle-chrome

`How to implement text that changes dynamically within images using HTML and PHP`

I'm working on a PHP website with Codeigniter and I have a requirement to insert HTML text into an image fetched from a database. The content of the text will vary based on different profiles. Below is the image: The text "$40" needs to be dynamic. H ...

javascriptphphtmlcodeigniter

Customize the dynamic options for selecting with Bootstrap

I have been experimenting with the bootstrap select plugin and have run into an issue while trying to dynamically add options using Javascript. Unfortunately, the list always appears empty. Interestingly, when I revert back to using a conventional HTML sel ...

javascriptjqueryhtmltwitter-bootstrap

What is the best way to display text outside of the current div container?

When I include the "Y" in the code snippet below, $title1 and $title2 are positioned outside of the div and centered against the width of the page. However, without the "Y", the text shifts up and aligns with the address class instead. It's puzzling w ...

csshtml

Struggling to retrieve an integer value from user input?

Hey there! I am facing an issue where I receive data from a form via POST, and some fields need to be treated as integers. However, when I use: var_dump($_POST) All the data is returned as strings enclosed in double quotes, which I would like to remove. ...

phphtmljson

Having trouble with the Tap to copy discount code function not working in the Shopify cart drawer?

Our goal is to implement tap to copy functionality for code snippets on our Shopify website. It works seamlessly on the product detail page, but in the cart drawer, it only functions properly after the second page load. https://i.sstatic.net/xzMVY.png ...

javascripthtmljqueryajaxshopify

Text affected by mix-blend-mode glitch

Currently, I am experimenting with knockout text using the mix-blend-mode property. An interesting issue arises when I examine the responsiveness of my design by utilizing Developer tools in the browser console - there are faint lines that momentarily appe ...

htmlcssgoogle-chromemix-blend-mode