0

How to make children follow height of parent? I tried using percentage but it didn't work. In my css, I set the class, 'text-container' to 50%. But it's taking up 100% of its parent, 'wrapper'. I tried using bigger values like 999% but its not changing anything. Why is this happening?

This is my code

.wrapper {
    height: fit-content;
    width: fit-content;
    border: red solid 2px
}

.text-container {
    height: 50%;
    border: green solid 2px
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <div class="wrapper">
        <div class="text-container">   
            <p>Hello World</p>
            <p>Hello World</p>
            <p>Hello World</p>
            <p>Hello World</p>
            <p>Hello World</p>
            <p>Hello World</p>
            <p>Hello World</p>
            <p>Hello World</p>
            <p>Hello World</p>
            <p>Hello World</p>
        </div>     
    </div> 
</body>
</html>
iMightjustGiveYouaBite
  • 89
  • 7

1 Answers1

0

Add display: grid; in the .wrapper class

.wrapper {
    height: fit-content;
    width: fit-content;
    border: red solid 2px;
    display: grid;
}

.text-container {
    height: 50%;
    border: green solid 2px
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <div class="wrapper">
        <div class="text-container">   
            <p>Hello World</p>
            <p>Hello World</p>
            <p>Hello World</p>
            <p>Hello World</p>
            <p>Hello World</p>
            <p>Hello World</p>
            <p>Hello World</p>
            <p>Hello World</p>
            <p>Hello World</p>
            <p>Hello World</p>
        </div>     
    </div> 
</body>
</html>
Rizeen
  • 1,296
  • 1
  • 6
  • 17