I am facing a challenge in creating dynamic padding within a container.
Consider the following HTML:
<div class="sections-container">
<div class="section"> </div>
<div class="section"> </div>
</div>
and the corresponding styling:
.sections-container {
border: 1px solid black;
width: 90%;
height: 400px;
padding: 2.4rem;
}
.section {
border: 1px solid black;
width: 100%;
height: 100px;
margin-top: 24px;
}
In the current setup, the padding within the container is fixed at 24px. You can view this in action at the following stackblitz example: https://stackblitz.com/edit/typescript-yw8xyp?file=style.css.
My goal is:
- As the container expands, the padding should increase dynamically up to a maximum of 100px.
- Conversely, as the container shrinks, the padding should decrease dynamically but not be less than 10px.
Essentially, I am looking to change the padding dynamically based on the container size, using only CSS. Is this achievable?
If you have any insights on how to accomplish this, I would greatly appreciate it. Thank you!