Ggtcf

Can you identify this lizard-like creature I observed in the UK?

What is the meaning of "You've never met a graph you didn't like?"

Is there anyway, I can have two passwords for my wi-fi

Why is the principal energy of an electron lower for excited electrons in a higher energy state?

Why would five hundred and five be same as one?

How to make money from a browser who sees 5 seconds into the future of any web page?

How do I tell my boss that I'm quitting in 15 days (a colleague left this week)

Can I run 125kHz RF circuit on a breadboard?

Air travel with refrigerated insulin

What the heck is gets(stdin) on site coderbyte?

Is it feasible to let a newcomer play the "Gandalf"-like figure I created for my campaign?

What should be the ideal length of sentences in a blog post for ease of reading?

Does the Crossbow Expert feat's extra crossbow attack work with the reaction attack from a Hunter ranger's Giant Killer feature?

Why can't the Brexit deadlock in the UK parliament be solved with a plurality vote?

Pre-Employment Background Check With Consent For Future Checks

How to test the sharpness of a knife?

Personal or impersonal in a technical resume

I'm just a whisper. Who am I?

Do I have to know the General Relativity theory to understand the concept of inertial frame?

How to get directions in deep space?

How much do grades matter for a future academia position?

Overlapping circles covering polygon

Make a Bowl of Alphabet Soup

Quoting Keynes in a lecture

CSS Keeping aspect ratio of div with padding, but it's disabled by Flexbox on parent

Why doesn't percentage padding / margin work on flex items in Firefox and Edge?Maintain the aspect ratio of a div with CSSHow to set the margin or padding as percentage of height of parent container?CSS force image resize and keep aspect ratioFill remaining vertical space with CSS using display:flexcenter div in flex div while mantaining aspect ratioPadding trick aspect ratio element - Vertical centeringFlexbox in Chrome doesn't seem to respect 'aspect ratio' padding; fine in FirefoxScale video to fit inside flexbox item while keeping aspect ratioIs there a height derived version of the CSS aspect ratio hackery?Maintain portrait aspect ratio on div using css

0

My Objective is to have both:

• Two (or more) boxes adjust responsively, keeping aspect ratio (using padding-top: x %)


• Have those boxes be contained in a flexbox, so they can have flex flow, wrap, and justify (& any flexbox stuff)

What Works:

• When the parent is NOT flexbox (so, display:block).


• Using the padding method to keep aspect ratio ( https://www.w3schools.com/howto/howto_css_aspect_ratio.asp )

Here is what that looks like:

 .prevdisplay 
 	 display:block;
 
 .prevspread 
 height:0;
 max-width:540px;
 padding-top:33.33%;
 position:relative;
 background:red;
 margin:0 0 10px;
 
 .previnfopage 
 background:hsla(1, 50%, 60%, .6);
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 

 <section class="prevdisplay"> 
 	<div class="prevspread">
 		<div class="previnfopage">
 <div>title1</div>
 		</div>
 	</div>
 	<div class="prevspread">
 		<div class="previnfopage">
 <div>title2</div>
 		</div>
 	</div>
 </section>

Here's the jsfiddle: https://jsfiddle.net/gmw4kn7t/3/

CONUNDRUM:

I want the ".prevdisplay" to be this:

.prevdisplay 
 display:flex;
 flex-flow:row;
 flex-wrap:wrap;
 justify-content:center

Here's that jsfiddle: https://jsfiddle.net/gmw4kn7t/4/

UPDATE:

I added flex-grow:1 to the child, which works... But, then does not again if the parent of everything is also display:flex ?! Here is what that looks like:

.higherblock 
 display:flex;
 width:100%;
 justify-content:center;
 align-items:center;
 flex-flow:column;
 flex-wrap:wrap;
 
.prevdisplay 
 display:flex;
 flex-flow:row;
 flex-wrap:wrap;
 justify-content:center;

.prevspread 
 height:0;
 max-width:540px;
 padding-top:33.33%;
 position:relative;
 background:red;
 margin:0 10px 10px;
 flex-grow:1;

.previnfopage 
 background:hsla(1, 50%, 60%, .6);
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;

That's: https://jsfiddle.net/gmw4kn7t/8/

That way, I can do all the Flexbox stuff, like wrapping and justify/align, etc. I couldn't seem to find solutions to this, that isn't related to images. Still, it feels like something incredibly simple I'm missing... am I crazy?

html css flexbox display aspect-ratio

share|improve this question

edited Mar 7 at 23:05

PLCcory

asked Mar 7 at 22:11

PLCcoryPLCcory

83211

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  probably need to simply add flex-grow:1?
  
  – Temani Afif
  Mar 7 at 22:18
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  That's helpful! But it gets negated again because everything listed above is within another parent that is display:flex: jsfiddle.net/gmw4kn7t/7 ??
  
  – PLCcory
  Mar 7 at 22:57
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  it's not good to use automactically flexbox like this ... the one applied to parent seems useless to me, it's doing nothing (only creating issues)
  
  – Temani Afif
  Mar 7 at 23:00
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  I thought this issue was resolved in newer versions of Firefox, but (assuming it's the same issue) maybe not: stackoverflow.com/q/36783190/3597276
  
  – Michael_B
  Mar 7 at 23:34
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thank you for your help. I moved away from the flex container, now I'm trying to figure out why it's so long if it's supposed to be 150% it's width jsfiddle.net/gc61vf9p/1 Anyway, thanks, I have to rethink things.
  
  – PLCcory
  Mar 8 at 0:35
  

  
  
  
  

add a comment | 

0

My Objective is to have both:

• Two (or more) boxes adjust responsively, keeping aspect ratio (using padding-top: x %)


• Have those boxes be contained in a flexbox, so they can have flex flow, wrap, and justify (& any flexbox stuff)

What Works:

• When the parent is NOT flexbox (so, display:block).


• Using the padding method to keep aspect ratio ( https://www.w3schools.com/howto/howto_css_aspect_ratio.asp )

Here is what that looks like:

 .prevdisplay 
 	 display:block;
 
 .prevspread 
 height:0;
 max-width:540px;
 padding-top:33.33%;
 position:relative;
 background:red;
 margin:0 0 10px;
 
 .previnfopage 
 background:hsla(1, 50%, 60%, .6);
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 

 <section class="prevdisplay"> 
 	<div class="prevspread">
 		<div class="previnfopage">
 <div>title1</div>
 		</div>
 	</div>
 	<div class="prevspread">
 		<div class="previnfopage">
 <div>title2</div>
 		</div>
 	</div>
 </section>

Here's the jsfiddle: https://jsfiddle.net/gmw4kn7t/3/

CONUNDRUM:

I want the ".prevdisplay" to be this:

.prevdisplay 
 display:flex;
 flex-flow:row;
 flex-wrap:wrap;
 justify-content:center

Here's that jsfiddle: https://jsfiddle.net/gmw4kn7t/4/

UPDATE:

I added flex-grow:1 to the child, which works... But, then does not again if the parent of everything is also display:flex ?! Here is what that looks like:

.higherblock 
 display:flex;
 width:100%;
 justify-content:center;
 align-items:center;
 flex-flow:column;
 flex-wrap:wrap;
 
.prevdisplay 
 display:flex;
 flex-flow:row;
 flex-wrap:wrap;
 justify-content:center;

.prevspread 
 height:0;
 max-width:540px;
 padding-top:33.33%;
 position:relative;
 background:red;
 margin:0 10px 10px;
 flex-grow:1;

.previnfopage 
 background:hsla(1, 50%, 60%, .6);
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;

That's: https://jsfiddle.net/gmw4kn7t/8/

That way, I can do all the Flexbox stuff, like wrapping and justify/align, etc. I couldn't seem to find solutions to this, that isn't related to images. Still, it feels like something incredibly simple I'm missing... am I crazy?

html css flexbox display aspect-ratio

share|improve this question

edited Mar 7 at 23:05

PLCcory

asked Mar 7 at 22:11

PLCcoryPLCcory

83211

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  probably need to simply add flex-grow:1?
  
  – Temani Afif
  Mar 7 at 22:18
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  That's helpful! But it gets negated again because everything listed above is within another parent that is display:flex: jsfiddle.net/gmw4kn7t/7 ??
  
  – PLCcory
  Mar 7 at 22:57
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  it's not good to use automactically flexbox like this ... the one applied to parent seems useless to me, it's doing nothing (only creating issues)
  
  – Temani Afif
  Mar 7 at 23:00
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  I thought this issue was resolved in newer versions of Firefox, but (assuming it's the same issue) maybe not: stackoverflow.com/q/36783190/3597276
  
  – Michael_B
  Mar 7 at 23:34
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thank you for your help. I moved away from the flex container, now I'm trying to figure out why it's so long if it's supposed to be 150% it's width jsfiddle.net/gc61vf9p/1 Anyway, thanks, I have to rethink things.
  
  – PLCcory
  Mar 8 at 0:35
  

  
  
  
  

add a comment | 

My Objective is to have both:

• Two (or more) boxes adjust responsively, keeping aspect ratio (using padding-top: x %)


• Have those boxes be contained in a flexbox, so they can have flex flow, wrap, and justify (& any flexbox stuff)

What Works:

• When the parent is NOT flexbox (so, display:block).


• Using the padding method to keep aspect ratio ( https://www.w3schools.com/howto/howto_css_aspect_ratio.asp )

Here is what that looks like:

 .prevdisplay 
 	 display:block;
 
 .prevspread 
 height:0;
 max-width:540px;
 padding-top:33.33%;
 position:relative;
 background:red;
 margin:0 0 10px;
 
 .previnfopage 
 background:hsla(1, 50%, 60%, .6);
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 

 <section class="prevdisplay"> 
 	<div class="prevspread">
 		<div class="previnfopage">
 <div>title1</div>
 		</div>
 	</div>
 	<div class="prevspread">
 		<div class="previnfopage">
 <div>title2</div>
 		</div>
 	</div>
 </section>

Here's the jsfiddle: https://jsfiddle.net/gmw4kn7t/3/

CONUNDRUM:

I want the ".prevdisplay" to be this:

.prevdisplay 
 display:flex;
 flex-flow:row;
 flex-wrap:wrap;
 justify-content:center

Here's that jsfiddle: https://jsfiddle.net/gmw4kn7t/4/

UPDATE:

I added flex-grow:1 to the child, which works... But, then does not again if the parent of everything is also display:flex ?! Here is what that looks like:

.higherblock 
 display:flex;
 width:100%;
 justify-content:center;
 align-items:center;
 flex-flow:column;
 flex-wrap:wrap;
 
.prevdisplay 
 display:flex;
 flex-flow:row;
 flex-wrap:wrap;
 justify-content:center;

.prevspread 
 height:0;
 max-width:540px;
 padding-top:33.33%;
 position:relative;
 background:red;
 margin:0 10px 10px;
 flex-grow:1;

.previnfopage 
 background:hsla(1, 50%, 60%, .6);
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;

That's: https://jsfiddle.net/gmw4kn7t/8/

That way, I can do all the Flexbox stuff, like wrapping and justify/align, etc. I couldn't seem to find solutions to this, that isn't related to images. Still, it feels like something incredibly simple I'm missing... am I crazy?

html css flexbox display aspect-ratio

share|improve this question

edited Mar 7 at 23:05

PLCcory

asked Mar 7 at 22:11

PLCcoryPLCcory

83211

 .prevdisplay 
 	 display:block;
 
 .prevspread 
 height:0;
 max-width:540px;
 padding-top:33.33%;
 position:relative;
 background:red;
 margin:0 0 10px;
 
 .previnfopage 
 background:hsla(1, 50%, 60%, .6);
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 

 <section class="prevdisplay"> 
 	<div class="prevspread">
 		<div class="previnfopage">
 <div>title1</div>
 		</div>
 	</div>
 	<div class="prevspread">
 		<div class="previnfopage">
 <div>title2</div>
 		</div>
 	</div>
 </section>

.prevdisplay 
 display:flex;
 flex-flow:row;
 flex-wrap:wrap;
 justify-content:center

.higherblock 
 display:flex;
 width:100%;
 justify-content:center;
 align-items:center;
 flex-flow:column;
 flex-wrap:wrap;
 
.prevdisplay 
 display:flex;
 flex-flow:row;
 flex-wrap:wrap;
 justify-content:center;

.prevspread 
 height:0;
 max-width:540px;
 padding-top:33.33%;
 position:relative;
 background:red;
 margin:0 10px 10px;
 flex-grow:1;

.previnfopage 
 background:hsla(1, 50%, 60%, .6);
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;

 .prevdisplay 
 	 display:block;
 
 .prevspread 
 height:0;
 max-width:540px;
 padding-top:33.33%;
 position:relative;
 background:red;
 margin:0 0 10px;
 
 .previnfopage 
 background:hsla(1, 50%, 60%, .6);
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 

 <section class="prevdisplay"> 
 	<div class="prevspread">
 		<div class="previnfopage">
 <div>title1</div>
 		</div>
 	</div>
 	<div class="prevspread">
 		<div class="previnfopage">
 <div>title2</div>
 		</div>
 	</div>
 </section>

 .prevdisplay 
 	 display:block;
 
 .prevspread 
 height:0;
 max-width:540px;
 padding-top:33.33%;
 position:relative;
 background:red;
 margin:0 0 10px;
 
 .previnfopage 
 background:hsla(1, 50%, 60%, .6);
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 

 <section class="prevdisplay"> 
 	<div class="prevspread">
 		<div class="previnfopage">
 <div>title1</div>
 		</div>
 	</div>
 	<div class="prevspread">
 		<div class="previnfopage">
 <div>title2</div>
 		</div>
 	</div>
 </section>

share|improve this question

edited Mar 7 at 23:05

PLCcory

asked Mar 7 at 22:11

PLCcoryPLCcory

83211

share|improve this question

edited Mar 7 at 23:05

PLCcory

asked Mar 7 at 22:11

PLCcoryPLCcory

83211

asked Mar 7 at 22:11

PLCcoryPLCcory

83211

asked Mar 7 at 22:11

PLCcoryPLCcory

83211