Fill only half of the container with a background color

Question

I have something like this:

#container {
  width: 300px;
  background-color: red;
  display: flex;
  justify-content: center;
}

#child {
  background-color: green;
  width: 250px;
  height: 150px;
  position: relative;
  top: 75px;
}

<div id="container">
  <div id="child"></div>
</div>

The red box is the container and it's height is equal to its content - in this case 150px. What I'd like to achieve is to make the container height equal half the size of its content size.

The effect that I want to achieve is to have the background-color fill half of the containers content.

If this can be made in some other way than changing the container height - feel free to propose a solution.

Answer 1

Use a linear gradient:

#child {
  background: linear-gradient(to bottom, green 50%, white 0%); 
}

change white with body color or any color you want.

Source: CSS-Tricks