CODEWITHSUNDEEP
htmlcssflexbox
Query
Query

Reputation: 123

CSS - Fill Space for Two Percentage-Width Columns with One Max-Width?

So, it's been a while since I tackled web development and I can't seem to remember how to deal with this one. Hours of googling later, I'm more knowledgeable about flex-boxes and other neat tools, but none of the solutions are quite doing the trick yet.

What I want:

I can't seem to get this to happen. I've tried flex settings on each with a flex-basis of 75% on the right column and "stretch" on the left; I've tried changing the display styles; I've even tried some overflow: hidden tricks (knowing full well they won't work out because I don't want to hide the overflow). So far, I'm only getting two variations - either both columns retain their initial sizing of 25% / 75%, or the left column stretches out behind the right column instead of taking up the available space.

I'm looking for a CSS solution to this if at all possible.

Upvotes: 1

Views: 1584

Answers (1)

bhv
bhv

Reputation: 5378

.a {
    display: flex;
}

.left {
    flex: 1;
}

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

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

as max-width: 500px on .right in medium, big screen you cant see 75% width.

Upvotes: 2

Related Questions