css - Set a div's height to a percentage of sibling div -

I have three siblings divs in a row:

right div: a div in which the height Its text content is determined.

Center div: A div that should match the height of the correct div.

Left div: Set a div I want at 50% height of the right diva.

Try CSS, do not use Flexbox with the left div:

 . Container {Display: Flex; }. Left {width: 50px; Height: 50%; Background color: light; }. Center {width: 50px; Background color: Light light; } .right {width: 300px; Background color: yellowGreen; }  

The only way I want to use the position: absolute to allow the left DV to calculate the percentage of the height of the correct div. / P>

Full condition is less than ideal, because it prevents me from using normal layout flow to set three divs next to each other in a row.

Is there a way to set left div for a percentage of height of the right div, without the need to use a certain horizontal layout to set three divs in a row? ?

Layout requires Chrome to work lately, so browser incompatibility is not an issue. I'm open to the solution using Flexbox or Table layout.

I do not know what restrictions your HTML structure is but what you want to do An easy way is to set left div to the same height as table-cell div, and inside it, an inner div 50% Height will not affect the flow of elements:

  .container {display : Table; }. Left {display: table-cell; Status: Relative; Width: 50px; } .left & gt; Div {background-color: lightsen; Height: 50%; Width: 100%; Status: Completed; }. Center {display: table-cell; Width: 50px; Background color: Light light; } .right {display: table-cell; Width: 300px; Background color: yellowGreen; }  

  & lt; Div class = "container" & gt; & Lt; Div class = "left" & gt; & Lt; Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "center" & gt; & Lt; / Div & gt; & Lt; Div class = "right" & gt; Advertise on this website is already a smart phone number for candidates & lt; / Div & gt; & Lt; / Div & gt;