Mixing percentage width with a fixed minimum width in CSS results in divs failing to align in a single line

Question

Mixing percentage width with a fixed minimum width in CSS results in divs failing to align in a single line

Having an issue with the responsiveness of a website layout that includes three columns (let's say 'A', 'B', and 'C') each 96% high, along with a footer. Columns A and C have a width of 35%, while column B is set to be 30% wide with a minimum width of 200px. When I shrink the browser and reach the point where column B can't get any thinner due to its min-width constraint, column C jumps down instead of adjusting accordingly. I am looking for a way to make all columns fill the space without fixed min-widths and with a max-width of 35%. Simply setting max-width: 35% does not solve this issue. Any ideas or suggestions would be greatly appreciated. Thank you!

html css responsive

Answer 1

Answer №1

html

<section class="wrapper">
  <div class="box boxA">Box A</div>
  <div class="box boxB">Box B</div>
  <div class="box boxC">Box C</div>
</section>

css

.wrapper{
  display: flex;
  justify-content: space-between;
}
.box{
  height: 96%;
}
.boxA, .boxC{
  background-color: blue;
  flex-basis: 35%;
}
.boxB{
  min-width: 200px;
}

fiddle: https://jsfiddle.net/4nhvtbpe/

Answer 2

html

<section class="wrapper">
  <div class="box boxA">Box A</div>
  <div class="box boxB">Box B</div>
  <div class="box boxC">Box C</div>
</section>

css

.wrapper{
  display: flex;
  justify-content: space-between;
}
.box{
  height: 96%;
}
.boxA, .boxC{
  background-color: blue;
  flex-basis: 35%;
}
.boxB{
  min-width: 200px;
}

fiddle: https://jsfiddle.net/4nhvtbpe/

Mixing percentage width with a fixed minimum width in CSS results in divs failing to align in a single line

Answer №1

Similar questions

Transforming a horizontal list into a vertical one

Tap on the image to enlarge

Issue with BeautifulSoup(page.content,'html.parser') not returning accurate content during web scraping

The Bootstrap Jumbotron section stubbornly stays above the footer

Positioning Elements at the Bottom with Bootstrap 5

Why does the div inside the tbody element get automatically shifted outside of the tbody during rendering?

The native javascript modal fails to appear

Ways to ensure a row of floated images within a <div> container adjusts its size in sync with the browser

Initiate an Ajax call to pre-fetch video content

Is it feasible to utilize the HTML5 video tag in conjunction with a JSON callback?

Will the identifier "id" be considered unique if the element with the matching id has its display property set to "none"?

Choose <a role="button"> over <button> for a better user experience

Having trouble with Jquery slide toggle and append functionality?

Creating stylish rounded corners for the table header with a specific background color using CSS

Adjust CKEditor's height within Vue.js

How to move content without affecting the background of the `<body>` using scrolling

Can the line "as is" be included in HTML code?

Unable to align divs horizontally

Retrieving Table Characteristics from an Online Source

Checking forms for standard regulations with jQuery