force fit parent div height to fit lt's child-CodePudding

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

<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 >
                <div >
                    <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>

CodePudding user response：

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

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

CodePudding user response：

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;

}