force fit parent div height to fit lt's child

force fit parent div height to fit lt's child

Problem Description:

I want to fit parent div height to fit it’s child

that means I want height of parent div to fit red color

and green part will hide

https://jsfiddle.net/zfpwb54L/

<style>
.container {
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
  width: 100%;
}
.section {
  padding: 20px 0;
  position: relative;
}
.style_content {
    color: #27272a;
    max-width: 700px;
    position: relative;
    text-align: center;
    z-index: 9;

}

</style>

<div id="parent" style="background-color:green; position: relative;  direction: rtl;width:fit-content;">
    <div style="position: absolute; inset: 0px;"></div>
    <div  style="width: 280px;; ">
        <div id="child" style="background:red;flex: 0 0 auto; width: 1400px;  transform-origin: right top 0px; transform: matrix(0.2, 0, 0, 0.2, 0, 0);">
            <section class="section">
                <div class="style_content container">
                    <div><h1>Hello</h1></div>
                     <div><p>that is for test.that is for test.that is for test.that is for test.that is for test.
                     that is for test.that is for test.that is for test.that is for test.that is for test.that is for test.that is for test.that is for test.</p></div>
                    <a href="#" target="_blank">click me</a>
                </div>
            </section>                  
        </div>
    </div>
</div>

Solution – 1

Please check it once. This is how you want to have it:

https://jsfiddle.net/kairavthakar2016/Lyf6qbtv/11/

Solution – 2

I simply added

box-sizing: border-box

to style_content class

.style_content {
    color: #27272a;
    box-sizing: border-box;
    position: relative;
    text-align: center;
    z-index: 9;

}