0

I'm trying to set up wide flex elements that contain two children (see image at bottom).

The green child element should fill the remaining width of the parent element.

The blue child element should maintain a certain aspect ratio (1 to 0.75, for instance), but ultimately it should fill the height of the parent element.

Here's how I've tried setting this up:

.parent-outer {
  display: flex;
  flex-direction: row;
  height: 250px;
}

.parent-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.blue-child {
  height: 100%;
  width: 75vh;
  background: blue;
}

.green-child {
  height: 100%;
  flex-grow: 1;
  background: green;
}
<div class="parent-outer">
  <div class="parent-inner">
    <div class="blue-child"></div>
    <div class="green-child"></div>
  </div>
</div>

This does not seem to be working.

edit: refactor based on Temani Afif's comment -- remove .parent-inner. Looks like that inner parent div wasn't necessary, but can't seem to get the blue child to fill it's container's height and allow its width to adjust accordingly:

.parent {
  display: flex;
  flex-direction: row;
  height: 250px;
}

.blue-child {
  height: 100%;
  width: 75vh;
  background: blue;
}

.green-child {
  height: 100%;
  flex-grow: 1;
  background: green;
}

<div class="parent">
  <div class="blue-child"></div>
  <div class="green-child"></div>
</div>

enter image description here

rpivovar
  • 3,150
  • 13
  • 41
  • 79
  • you can start by removing `flex-direction: column;` because you figure show a row one for the blue and green – Temani Afif Jan 30 '20 at 20:42
  • @TemaniAfif I think you're right -- refactoring the question based on this – rpivovar Jan 30 '20 at 20:46
  • using `vh` as element height reference is wrong. `vh` refers to the height of the viewport. if the height is set with 250px just do width: (250 * 0.75)px or `width: calc(250px * 0.75)` – Matan Sanbira Jan 30 '20 at 20:59
  • The only issue here seems to be the aspect ratio of the blue div and that can be found here - https://stackoverflow.com/questions/1495407/maintain-the-aspect-ratio-of-a-div-with-css. – Paulie_D Jan 30 '20 at 21:00

0 Answers0