Flexbox: How to Properly Set Block Sizes

Creating a Two-Column Layout with Flexbox: Right Column Takes 40% Width (Max 600px)

To create a two-column layout with flexbox where the right block takes up 40% of the width but no more than 600px, and the left block fills the remaining space, use a combination of calc(), max-width, and proper flexbox settings. The main formula for the right block will be calc(40% - max(0, (100% - 1200px) / 2)), and for the left block - calc(60% + max(0, (100% - 1200px) / 2)) with a max-width: 600px constraint.

Table of Contents

• Basic Approach with calc() and max-width
• Alternative Methods
• Practical Implementation
• Browser Compatibility Optimization
• Testing on Different Screen Sizes

Basic Approach with calc() and max-width

The most effective solution is to use the CSS calc() function to dynamically calculate the width of blocks based on the total width of the container. For your case, you need a formula that accounts for both conditions: 40% width and a 600px limit.

.container {
  display: flex;
  width: 100%;
}

.right-column {
  flex: 0 0 calc(40% - max(0, (100% - 1500px) / 2));
  max-width: 600px;
  background-color: #f0f0f0;
}

.left-column {
  flex: 1;
  background-color: #d0d0d0;
}

The formula max(0, (100% - 1500px) / 2) works as follows:

• When the screen width is less than 1500px, (100% - 1500px) will be negative, so max(0, ...) will return 0
• When the screen width is greater than 1500px, the formula subtracts half of the difference between 100% and 1500px from 40%

Important: The 1500px value needs to be adjusted experimentally to achieve the desired behavior. If you want the 600px limit to take effect at a width of 1200px, use 1200px instead of 1500px in the formula.

Alternative Methods

Method Using the min() Function

If your target audience uses modern browsers, you can use a simpler construction with min():

.right-column {
  flex: 0 0 min(40%, 600px);
  background-color: #f0f0f0;
}

.left-column {
  flex: 1;
  background-color: #d0d0d0;
}

However, this method doesn’t account for the left block taking up the remaining space proportionally, rather than just all the rest.

Method Using Media Queries

For maximum compatibility, you can use media queries:

.container {
  display: flex;
  width: 100%;
}

.right-column {
  flex: 0 0 40%;
  max-width: 600px;
  background-color: #f0f0f0;
}

.left-column {
  flex: 1;
  background-color: #d0d0d0;
}

/* On large screens - adjust proportions */
@media (min-width: 1500px) {
  .right-column {
    flex: 0 0 600px;
  }
  .left-column {
    flex: 1;
  }
}

Practical Implementation

Here’s a complete implementation that meets all your requirements:

.flex-container {
  display: flex;
  width: 100%;
  box-sizing: border-box;
}

.flex-container .left-column {
  flex: 1;
  background-color: #e8f4f8;
  padding: 20px;
  min-width: 0; /* Important for preventing overflow */
}

.flex-container .right-column {
  flex: 0 0 calc(40% - max(0, (100% - 1500px) / 2));
  max-width: 600px;
  background-color: #f0f8e8;
  padding: 20px;
  min-width: 0; /* Important for preventing overflow */
}

HTML Structure:

<div class="flex-container">
  <div class="left-column">
    <!-- Left block content -->
  </div>
  <div class="right-column">
    <!-- Right block content -->
  </div>
</div>

For better compatibility with older browsers, add prefixes:

.flex-container {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
}

Browser Compatibility Optimization

Since you need to support Windows 7, consider the following points:

1. calc() Support: Browsers on Windows 7 (IE9+) support calc() with prefixes
2. max() Support: The max() function is supported starting from IE11
3. Alternative for IE9-10: If IE9-10 support is needed, use media queries:

/* For IE9-10 */
.right-column {
  flex: 0 0 40%;
  max-width: 600px;
}

@media (min-width: 1500px) {
  .right-column {
    width: 600px;
    flex: 0 0 auto;
  }
}

4. Backend Solution: If maximum compatibility is required, you can use JavaScript to calculate the width:

function adjustColumnWidths() {
  const container = document.querySelector('.flex-container');
  const rightColumn = document.querySelector('.right-column');
  const containerWidth = container.offsetWidth;
  
  const desiredRightWidth = Math.min(containerWidth * 0.4, 600);
  const rightWidth = Math.max(desiredRightWidth, containerWidth * 0.4 - (containerWidth > 1500 ? (containerWidth - 1500) / 2 : 0));
  
  rightColumn.style.width = rightWidth + 'px';
}

window.addEventListener('resize', adjustColumnWidths);
adjustColumnWidths(); // Call on load

Testing on Different Screen Sizes

Let’s check how our solution will work on the screen sizes you specified:

At 1024px width:

• Right block formula: calc(40% - max(0, (100% - 1500px) / 2))
• Since 1024px < 1500px, the formula simplifies to calc(40% - 0) = 40%
• Right block: 1024px × 0.4 = 409.6px ≈ 410px
• Left block: 1024px - 410px = 614px

At 1920px width:

• Right block formula: calc(40% - max(0, (1920px - 1500px) / 2))
• Calculation: calc(40% - (420px / 2)) = calc(40% - 210px)
• 40% of 1920px = 768px
• Right block: 768px - 210px = 558px, but with a max-width: 600px limit
• Final right block: 600px (limit)
• Left block: 1920px - 600px = 1320px

At 2560px width:

• Right block formula: calc(40% - max(0, (2560px - 1500px) / 2))
• Calculation: calc(40% - (1060px / 2)) = calc(40% - 530px)
• 40% of 2560px = 1024px
• Right block: 1024px - 530px = 494px, but with a max-width: 600px limit
• Final right block: 600px (limit)
• Left block: 2560px - 600px = 1960px

To get exactly the values you specified (410px, 600px, 600px), you need to adjust the value in the formula. For a width of 1024px, you want the right block to be 410px, which is approximately 40.04% of 1024px. This means your formula should account for the exact logic.

Sources

1. Two-column layout with split widths (70/30) in Elementor - Daveden WebDev - formula using calc() and max() for creating flexible columns

2. CSS Max-Width and Min-Width: Complete Guide to Responsive Width Constraints - CodeLucky - detailed guide to working with width constraints in flexbox

3. 2 Column Layouts (Responsive, Flexbox & CSS Grid) - Matthew James Taylor - examples of implementing two-column layouts using calc()

4. How to Define Two Column Layout using Flexbox? - GeeksforGeeks - basic examples of flexbox two-column layouts

5. The easy way to create equal width column in Elementor using Flexbox - Daveden WebDev - advanced techniques for working with flexbox

Conclusion

1. Main Solution: Use a combination of calc() and max-width to achieve the desired behavior for the right block, which would take up 40% of the width but no more than 600px.

2. For Maximum Compatibility with Windows 7, add prefixes and consider alternative methods with media queries or JavaScript for very old browsers.

3. Adjust Parameters in the calc() formula to meet your specific requirements - change the 1500px value to the desired threshold at which the 600px limit should take effect.

4. Test on Different Devices and screen sizes, as behavior may vary depending on viewport size and the presence of scrollbars.

5. Use min-width: 0 for flex container children to avoid overflow issues in narrow columns.