CSS - Maximizing One Column's Width While Allocating Percentage Space for Two Columns?

It's been quite some time since I delved into the world of web development and I seem to have forgotten how to tackle this particular issue. Despite hours spent searching online, I've gained knowledge about flex-boxes and other useful tools, but none of the solutions seem to work for me.

My Goal:

  • I want Container A to have two columns, Left and Right.
  • The Left Column should typically be 25% width, while the Right column should usually be 75% width.
  • The Right Column should have a max-width constraint of 500px.
  • Once the Right Column reaches its max-width, the Left Column should expand to fill the remaining space so it isn't wasted.

I'm struggling to get this desired effect. I've experimented with flex settings, setting the right column flex-basis to 75% and "stretch" on the left; I've played around with different display styles; I even attempted some overflow: hidden tricks (knowing they wouldn't work as I don't want to hide overflow). So far, I'm only achieving one of two outcomes - either both columns keep their initial size ratios of 25% / 75%, or the left column stretches behind the right column instead of utilizing the available space.

If possible, I am seeking a CSS solution to resolve this dilemma.

htmlcssflexbox

Answer №1

.x {
    display: flex;
}

.left-side {
    flex: 1;
}

.right-side {
    flex: 3;
    max-width: 500px;
}

.left-side, .right-side {
    border: 1px solid #ddd;
    padding: 10px;
}
 <div class="x">
 <div class="left-side">
first
 </div>
 <div class="right-side">
second
 </div>
 </div>

when the screen size is medium to big, setting max-width: 500px on .right-side may result in only seeing 75% of the width.

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

.css files standing their ground against modifications

Currently, I'm utilizing the WebStorm IDE to work on my React project. My goal is to make modifications to the app.css files in order to update the design. However, each time I attempt to build or run the project, it dismisses all of the changes I&apo ...

cssreactjsgulp

React JS Bootstrap Dropdown Troubleshooting

I'm facing a challenge in my React.js project while trying to implement a filter. The issue is that the list appears when I click on the button, but it doesn't disappear on the second click or if I click outside the list. Initially, I imported t ...

javascriptcssreactjstwitter-bootstrap

Floating a DIV causes it to shift down in a responsive layout at specific window sizes

My issue lies with a fluid layout that works well for the most part. However, at specific window widths, one of four floating div-elements unexpectedly shifts down. This inconsistency happens at nearly 20 different widths, differing by only one pixel. For ...

csshtml

The clash between the position:fixed and overflow:visible styles in CSS

I'm working on a webpage layout that includes an image positioned on the right side of the page. I want to create horizontal scroll bars when the browser window is resized, so I added the overflow: visible property. Additionally, I want the image to b ...

htmlcss

What steps should I take to adjust the CSS code to properly integrate with my HTML file?

There seems to be an issue with the code provided. The CSS for the menu bar is not functioning properly with the HTML. <!DOCTYPE html> <html> <body class="news"> <head> <style type="text/css">body { margin: 0; paddi ...

htmlcss

Conceal the bottom HTML/widget and eliminate the Drag & Drop functionality from the Streamlit file_uploader() feature

I have developed an application using Streamlit that requires the ability to read multiple files simultaneously. To achieve this, I am utilizing the file_uploader() component with the parameter accept_multiple_files=True. I have two queries: Firstly, is ...

pythonhtmlpython-3.xstreamlit

What could be the reason for the meta viewport not functioning properly on Android devices with Cordova 5.1.1?

Ever since upgrading my app to cordova 5.1.1, I've noticed that the meta viewport no longer functions properly on Android devices. The app is not displaying correctly as a result. Despite trying various solutions, I am still facing this issue. Is ther ...

htmlcssangularjscordova

Certain HTML elements on the webpage are not functioning properly when attempting to incorporate a div tag

One of the challenges I'm currently facing is that the links for HOME and ABOUT ME in the header section are not accessible when the 'data' div is added. Strangely, the DOWNLOAD and CONTACT ME links still work fine. This issue seems to be oc ...

cssgoogle-chromehtmlhyperlink

Scroll effect for read-only text input with long content inside a div

Is there a way to replicate the scroll functionality of a text input with readonly="readonly"? When the text exceeds the box size, you can highlight and scroll to view it all without a visible scrollbar. I am interested in achieving this effect within a p ...

javascripthtmlcss

Positioning SVGs within a parent container while maintaining responsiveness

How can I anchor an SVG overlay with a circle in the bottom right corner while expanding the rest of the SVG to fill the remaining area of the container without distorting the circle? I've been able to position the SVG in the bottom right corner, but ...

htmlcsssvgresponsive

Chrome's display of HTML5 form validation bubble is not aligned correctly

Can anyone shed some light on why the Form Validation Bubble is showing up with a big offset in Google Chrome when trying to validate a form inside a jquery UI dialog? It seems to work fine when the javascript call creating the dialog is removed. Just want ...

validationhtmlgoogle-chrome

What is the method for individually extracting values from HTML using class li?

Is there a way to extract each value from the HTML within the li class separately? I have tried various methods but none have been successful. Can anyone provide a solution? Here is my JavaScript code: $(document).ready(function() { $(".list-grou ...

javascripthtmljquery

Creating a Form with Dynamic HTML when Button is Clicked

I have been working on enhancing the functionality of my website app located at , but unfortunately, I have not been successful so far. My goal is to introduce a vendor information form with just one click of a button and then enable users to add products ...

javascriptjqueryhtmlonclickdynamic-html

Can you tell me which CSS property is used to display the ellipsis (...) when there is overflow in the x

When the content exceeds the parent's width, the property overflow-x displays a scrollbar. However, I would prefer to show three dots "..." instead of the scrollbar. Is there a way to do this? ...

css

How can one element be made to rely on the presence of another element?

I'm currently working on my portfolio website and encountering an issue. Whenever I hover over an image of a project, the image expands in size, becomes less transparent, and a description of the project pops up. However, I would like to include a lin ...

javascripthtmlcss

Tips for converting a large number into a string format in JavaScript

I created this easy loan calculator by following online tutorials and using my basic coding skills. It works well, but I would like to add spaces in the output numbers for readability. For example, instead of "400000", I want it to display as "400 000". ...

javascriptjqueryhtml

Ways to display an error message in Angular 8 when entering anything other than numbers in a text box

In my Angular 8 application, I have a text box that only allows the user to type numbers. If they try to type an alphabet or special character, it should display an error message below the text box. The error message should disappear once the user starts ...

htmlangulartypescript

The directory structure does not align with the 301 redirect

I recently transitioned my website from HTML to a CMS platform. The new CMS does not include any file extensions in the URLs, so I have maintained the same URL structure from my old HTML site. Here is an example of the difference: HTML site URL: www.sit ...

phphtml.htaccesshttp-redirect

The image is not resizing correctly

Currently, the background-image on my website displays properly when the browser occupies the entire screen. However, when I resize the browser window, the image shrinks to a certain point and then suddenly stops adjusting. Here is a visual representation ...

htmlcssbootstrap-4

Incorporating ContentPlaceHolder in ASP.NET MasterPage

For my In-Application CMS project, I am considering allowing users to upload an HTML and a CMS file as the Masterpage. One solution I have in mind is to have users include Pre-Defined Tags within their HTML files, which I can then replace with ContentPlac ...

c#htmlasp.netmaster-pagescontentplaceholder