Binding child div's width to parent div's height

Question

I'm using flexbox to organize my divs, the rectangle of x by y is already in another flexbox, which is also in another flexbox... etc. I have to put three other divs inside the x;y rectangle, they will be organized like this:

This is why I need a way to retrieve parent's height (y), in order to assign this value to my middle div's width to make it a square centered in the (x;y) rectangle.

I know there is a way to make calculations at runtime (calc) but maybe I'm missing something and there is a easier way to do what I want to do there.

EDIT: I think I'm a duplicate of this

EDIT2: Not really a duplicate because the topic above is using a px width for parent container, while I'm using 100%. You can find my jsffidle in the comments section.

No, I edited my image to make it clearer, I know the dimensions of the parent and I have to use them to set dimensions of the green and orange divs. — Axel Carré, Nov 18 '19 at 22:56
Are you expecting something like this? https://jsfiddle.net/odwhLe83/ — Murali Nepalli, Nov 18 '19 at 23:06
Sunil's answer to the duplicate would appear to answer your need. — Jeff Zeitlin, Nov 19 '19 at 20:37

Murali Nepalli · Answer 1 · 2019-11-18T23:47:51.160

0

You can set the width and height of the child divs in percentages, alternatively you can use css variables along with "calc" too.

<html>
<head>
<style>

:root {
  --y: 300px;
  --x: 500px;
}

.flex-container {
  width: var(--x);
  height: var(--y);
  display: flex;
  flex-wrap: nowrap;  
}

.first {
  background-color: green;
  width:calc(var(--x)/2 - var(--y)/2);
}

.middle {
  background-color: orange;
  width:var(--y);
}

.last {
  background-color: green;
  width:calc(var(--x)/2 - var(--y)/2);
}

.flex-container > div {    
  text-align: center;
  line-height: 75px;
  font-size: 30px;
  height: 100%;  
}
</style>
</head>
<body>

<div class="flex-container">
  <div class="first"></div>
  <div class="middle"></div>
  <div class="last"></div>  
</div>

</body>
</html>

edited Nov 18 '19 at 23:47

answered Nov 18 '19 at 23:38

Murali Nepalli

1,588
8
17

I edited my question. – Axel Carré Nov 19 '19 at 00:04
are you allowed to use javscript or just css and html? – Murali Nepalli Nov 19 '19 at 00:07
I do what I want but I'd prefer to do it pure CCS if it is possible. – Axel Carré Nov 19 '19 at 00:42

score 0 · Answer 2 · 2019-11-19T00:09:14.923

0

Hope it Help

.wrapper{
  
  width: 800px;
  height: 800px;
}

.container {
  
  display: flex;
  height: 100%;
  width: 100%;
}

.item1{
  
  background-color: red;
  flex: 1;
}

.item2{
  
  background-color: yellow;
  flex: 2;
}

.item3{
  
  background-color: red;
  flex: 1;
}

<div class="wrapper">
  <div class="container">
    <div class="item1"></div>
    <div class="item2"></div>
    <div class="item3"></div>
  </div>
</div>

edited Nov 19 '19 at 00:09

answered Nov 18 '19 at 23:45

The middle "div" needs to be a square. As per your code it is not. – Murali Nepalli Nov 18 '19 at 23:50
hmm, you just have to play with flex and the size of the container – Nov 18 '19 at 23:57
I don't know the size of the container since it's a container already in another container... etc. – Axel Carré Nov 19 '19 at 00:05
that's why if you put width and height at 100% it will take the size of his parent – Nov 19 '19 at 00:07
Best way to find a solution it's to provide code to visualize the thing – Nov 19 '19 at 00:10
I think I understood that I can use the parent's width for the child's width using percent (that's wha I'm doing at the lmoment in my flexboxes) but I don't know how to use the parent's height in the child's width. – Axel Carré Nov 19 '19 at 00:41
Can you provide your issue with a jsfiddle ? – Nov 19 '19 at 01:18
Here's a jsfiddle: https://jsfiddle.net/zuyv7nsg/ – Axel Carré Nov 19 '19 at 11:29
100% here doesnt work because the parent of the parent (here the body) has no syze !! you need to set a height to your parent if you want the 100% works – Nov 19 '19 at 16:21

Binding child div's width to parent div's height

2 Answers2