How to fit many HTML child elements inside a parent element?

Question

How can I fit the 2 child elements (blue border) to fit perfectly within the parent (black border) without having to adjust the height?

like this

My code:

<html>
<head>
<style>
        .parent {
            border: 3px solid black;
            height: 500px;
            
        }
        .child {
            border: 3px solid blue;
            height: 50%;
            margin: 2% 1%;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
        <div class="child"></div>
    </div>
</body>
</html>

score 1 · Accepted Answer · answered May 12 '20 at 08:31

you could just use display: flex and flex-direction and set it like this :

.parent {
    border: 3px solid black;
    height: 500px;
    display: flex;
    flex-direction: column;
}
.child {
  border: 3px solid blue;
  height: 50%;
  margin: 2% 1%;
 }

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
 </div>

reference

score 0 · Answer 2 · answered May 12 '20 at 08:29

0

I think you have to use flexbox in this case for parent element, and then set flex: 1 for .child element by removing height preliminary.

Look at example which I prepared for you. Please give me feedback, is it correct results or not, I would discuss with you problem.

https://codepen.io/codeviking/pen/QWjxVMX

answered May 12 '20 at 08:29

dmitryprogrammer

366
1
11

Yes, this works too. Thank you. – huy_trvan May 12 '20 at 08:38

How to fit many HTML child elements inside a parent element?

2 Answers2