强制适合父 div 高度以适合 LT 的孩子

Question

我想让父div的高度适合它的子div

这意味着我想让父div的高度适合红色

和绿色部分将隐藏

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>

Answer 1

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

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

Answer 2

我只是添加了

box-sizing: border-box

到style_content class

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