inline-block overflowing on the height of its container?

Question

I had this color-container:

<div class="color-container">
   <div class="inline" id="red"></div>
   <div class="inline" id="green"></div>
   <div class="inline" id="yellow"> </div>
   <div class="inline" id="blue"> </div>
</div>

And the CSS:

.color-container {
  width: 300px;
  height: 320px;
  position: relative;
  text-align: center;
  margin: auto;
 }

But my children are overflowing the height of the parent color-container? the children have same style like this:

#green {
  height: 150px;
  width: 150px;
  background-color: green;
  border-radius: 0 100% 0 0;
  border: solid #333333;
  border-width: 2px 2px 1px 1px;
}

The class inline is as below:

.inline {
  display: inline-block;
}

I was expecting it not to overflow, but this is the result:

Answer 1

You should minimize the width and height according to the border as the border is 3px in total (both horizontally and vertically). and float:left;

 .color-container { width: 300px; height: 320px; position: relative; text-align: center; margin: auto; } .color-container > div { float:left; height: 147px; width: 147px; background-color: green; border-radius: 0 100% 0 0; border: solid #333333; border-width: 2px 2px 1px 1px; } #red { background-color: red; border-radius: 100% 0 0 0; } #green { background-color: green; border-radius: 0 100% 0 0; } #yellow { background-color: yellow; border-radius: 0 0 0 100%; } #blue { background-color: blue; border-radius: 0 0 100% 0; } .inline { display: inline-block; } 

 <div class="color-container"> <div class="inline" id="red"></div> <div class="inline" id="green"></div> <div class="inline" id="yellow"> </div> <div class="inline" id="blue"> </div> </div>