Downsize Only When 'Out of Free Space'

I’m wondering if its possible to only ‘downsize’ one or more child elements when their parent contains no more ‘free space’ using a percentage based layout and only html and css.

In Detail:
In the attached picture, Items 1 and 2 are children of the rectangle, and the layout is percentage based. What I’m trying to do is to only scale the Items down if there is no more available free space (the user has caused the parent to be more narrow) and get larger as the container grows. I thought Flexbox might be the way to go, but I haven’t gotten anything to work so far.

Hi there dcarr,

and a warm welcome to these forums. :winky:

What about 1 and 2?

coothead

Hi there dcarr,

as you have not replied to my post, I will assume
that box 1 and box 2 have set widths. :winky:

With that thought in mind. here is an example…

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
<link rel="stylesheet" href="screen.css" media="screen">
<style media="screen">
body {
    margin: 0.5em;
    background-color: #f0f0f0;
    font: 1em/1.62em verdana, arial, helvetica, sans-serif;
 }
#container {
    max-width: 75%;
    padding: 0.5em;
    margin: auto;
    border: 0.062em solid #000;
    box-sizing: border-box;
    overflow: hidden;
    background-color: #ffa800;
 }
#container div {
    float: left;
    width: 20em;
    padding: 0.5em;
    border: 0.062em solid #000;
    box-sizing: border-box;
    background-color: #000;
    color: #f00;
    text-align: center;
    word-break: break-all;
 }
#container div:first-of-type { 
    margin-right: 0.5em;
 }
/* body margin = 1em, #container padding = 1em, 2 boxes at 20em = 40em, margin-between = 0.5em
   total width = 42.5em divide by 3, multiply by 4 - (75%) = 56.6em */
@media screen and ( max-width: 56.666em ) {
#container div {
    width: 10em; 
  }
 }
/* body margin = 1em, #container padding = 1em, 2 boxes at 10em = 20em, margin-between = 0.5em
   total width = 22.5em divide by 3, multiply by 4 - (75%) = 30em */
@media screen and ( max-width: 30em ) {
#container div {
    width: 5em; 
  }
 }
/* body margin = 1em, #container padding = 1em, 2 boxes at 5em = 10em, margin-between = 0.5em
   total width = 12.5em divide by 3, multiply by 4 - (75%) = 16.666em */
@media screen and ( max-width: 16.666em ) {
#container div {
    width: 2.5em; width: 100%;
  }
#container div:first-of-type { 
    margin:0 0 0.5em;
  }
 }
</style>
</head>
<body> 
 <div id="container">
  <div>Item 1</div>
  <div>Item 2</div>
 </div>
</body>
</html>

coothead

Flex can do it, assuming I interpreted your requirements corrctly, like this:-
https://codepen.io/SamA74/pen/PKZdJY
This mainly happens via the flex property on the children. It’s actually a short-hand for three properties, flex-grow, flex-shrink and flex-basis.
I set grow to 0 otherwise the boxes will expand to fill all available space (which is nice if you want that).
I set shrink to 1 to allow “downsizing”, then the flex-basis to the maximum size wanted for the boxes.
That’s a bit like setting a width, but flex-basis is less rigid that setting width, max-width or min-width as it does still allows for some flexibility either way of the target size. Thus the shrink allows it to shrink, and grow would allow it to expand has I given it a >0 value.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.