problem with container resizing by adding new elements

Question

If we add more sample-sentence divs in the given code the gray container gets bigger and fit with the new height of the content.

I want to get the same behavior with rtl-container so that if we add more lis, the gray container should get bigger to fit the new height of rtl-container.

How can I do that without ruining the whole layout?

.explainer-container {
  position: relative;
  overflow: hidden;
  /*height: 47vh;*/
  top: 9vw;
  z-index: 11;

  max-width: 70vw;
 
  background-color: rgba(6, 0, 15, 0.6);
  padding: 0;
  font-size: 1.25vw;
  border-radius: 1rem;
  box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, .3), 0 0.0625rem 0.125rem rgba(0, 0, 0, .2);
  margin-left: auto;
  margin-right: auto;
}
.explain-header {
  padding: 1.2em 1em;
  color: #e9e4f0;
}
#phrase {
   font-family: "Open Sans Bold";
   color: #ff9100;
}
#colon {
  font-family: "Vazir-Bold";
  color: #ff0033;
}
#en-definition{
  font-family: "Open Sans Light";
   color: #f0ede9;
}
#title-synonym {
  font-family: "Open Sans Bold";
  font-size: 1vw;
   color: #4287f5;
}
#synonym {
   font-family: "Open Sans Regular";
   font-size: 1vw;
   color: #b0bfd9;
}
.sample-sentence {
  display: grid;
  justify-content: start;
  max-width: 50%;
  margin: 0 !important;
}

.rtl-sample  {
  font-family: "Vazir-Thin";
  font-size: 0.9vw;
  margin-top: 1vh;
   margin-bottom: 0;
  direction: rtl;

}
.eng-sample {
  font-family: "Open Sans Regular";
  font-size: 1.2vw;
  color: #eee6f0;
  margin-bottom: 0;
}


/*Explain Styles*/
.rtl-container {
  position: absolute;
  overflow: hidden;
  max-width: 35vw;
  max-height: 47vh;
  width: 40vw;
  z-index: 11;
  outline: 0.1vw dashed orange;
  top: 0;
  right: 0;
  padding: 0.5em 0em;
}

.rtl-explain {
    position: relative;
    font-family: "Vazir-Thin";
    direction: rtl;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
    text-align: right;
    width: 100%;
    font-size: 1vw;
    color: rgb(248, 247, 250);
    opacity: 0;  
    margin: 0 auto;
}

<div class="explainer-container">

        <div class="explain-header">
            <span id="phrase">to make up for</span>
            <span id="colon">:</span>
            <span id="en-definition">to prepare for sth</span>
            <br>
            <span id="title-synonym">synonym(s):</span>
            <span id="synonym">to prepare - to plan</span>
      
      <!-- <div class="sample-sentence">
              <p class="eng-sample">I could make up a bed for you on the sofa.</p>
              <p class="rtl-sample">ی رختخواب روی کاناپه برات آماده می کنم.</p>
            </div> -->

            <div class="rtl-container">
                <p id="rtl-explain" class="rtl-explain captionShow"><ul><li>بهترین روش برای ما استفاده از این <span class="colored">I</span> <span class="colored">will</span> <span class="colored">be</span> <span class="colored">+</span> <span class="colored">ing</span> هست.</li><li>در تمام این روش ها ما داریم از <span class="colored">رنگ های مختلف</span> استفاده   می کنیم. به امید دیدار... <span class="round-bracket">( </span>ارادتمند شما<span class="round-bracket"> )</span></li><li>ادامه دارد این ماجرا</li></ul></p>
            </div>
        </div>

    </div>

Edit: I've edited the code and removed all sample-sentence divs now we can only see portion of the li (only two of them)...

In the current code we want to expand the grey container to see all the lis...

Answer 1

You have to remove the position: absolute property of the .rtl-container. If you set the position of a div to absolute, the size of it has no effect on its ancestor elements anymore. Furthermore, its placed either relative to the viewport or, if position: relative is set in the ancestor additionally, relative to that.

After removing the position: absolute property you could apply float: right to .rtl-container to achieve the same layout like before or float: left to both the adjacent element .sample-sentence and .rtl-container.

.rtl-container {
  /* position: absolute; */
  /* overflow: hidden; */
  max-width: 35vw;
  /* max-height: 47vh; */
  width: 40vw;
  /* z-index: 11; */
  outline: 0.1vw dashed orange;
  /* top: 0; */ 
  /* right: 0; */
  padding: 0.5em 0em;
  /* new property */
  float: right;
}

Of course there might be more up-to-date layout options like e.g. using flexbox or the CSS Grid Layout module, but float is not deprecated as stated in the other answer.

Answer 2

okay I found a simple perfect, responsive solution, but first, your code has a ton of things that is just not needed to position, the main reason your container doesn't expand because you have put your position as absolute

.rtl-container {
  position: absolute; <- right here
  overflow: hidden; <- also this hides the extra li elements
  max-width: 35vw;
  max-height: 47vh;
  width: 40vw;
  z-index: 11;
  outline: 0.1vw dashed orange;
  top: 0;
  right: 0;
  padding: 0.5em 0em;
}

not only that but in the parent container you have also put the overflow as hidden, right here:

.explainer-container {
  position: relative; <- also when using div element, they already come with relative position, so need to put this here.
  overflow: hidden; <- everything that is outside the this container will never expand to full size
  /*height: 47vh;*/
  top: 9vw;
  z-index: 11;

  max-width: 70vw;
 
  background-color: rgba(6, 0, 15, 0.6);
  padding: 0;
  font-size: 1.25vw;
  border-radius: 1rem;
  box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, .3), 0 0.0625rem 0.125rem rgba(0, 0, 0, .2);
  margin-left: auto;
  margin-right: auto;
}

that hides the entire body of anything that leaves its given height and since you have put the position of rtl-container as absolute, that rtl-container is never counted inside the parent container, so the .explainer-container thinks that only the left side element exists and completely ignores everything you have on the right side because you put them on position absolute, so this already made things way to complex then it needs to be, better solution is to use grid layout, simple and you won't have to define all these things to just put things left and right, so here is the simple code:

<div class="grid-container"> <- this is the main container, in your case, its the .explainer-container
    <p>put left hand side things here</p> <-this is where all the things left hand side go, in your case, its the explain-header
    <ul> <- now this is the right hand side, that list on the right side goes here
        <li>TEXT</li>
        <li>TEXT</li>
        <li>TEXT</li>
        <li>TEXT</li>
        <li>TEXT</li>
        <li>TEXT</li>
        <li>TEXT</li>
        <li>TEXT</li>
        <li>TEXT</li>
        <li>TEXT</li>
        <li>TEXT</li>
        <li>TEXT</li>
        <li>TEXT</li>
        <li>TEXT</li>
        <li>TEXT</li>

    </ul>
</div>


<style>    
    .grid-container {
        display: grid; 

        grid-template-columns: 1fr 1fr; // this 1fr means 1 fraction, writing 1fr 2 times means 2 columns are created, so only 2 columns in one row, meaning only side exists, left and right, no middle, to get middle, just add one more 1fr making it `1 fr 1fr 1fr`.
        
        background-color: red; // just to showcase visualize
    }

    p {
        background-color: blue; //same thing here
    }
</style>

now you see that grid-container divides things into 2 parts using grid layout and grid-template-columns to define number of columns, now, how does it know how to divide elements? as you can see this code has a paragraph and a list, so basically:

grid-container

item one paragraph <- this gets 1fr

item two list <- this gets 1fr

so basically every element that comes right after grid-container, grid-container takes that and uses that to divide, so If I only wrote the list and removed the paragraph, the list will take the entire screen, but If I put 3 items, lets say 2 paragraphs and 1 list, that will make the grid-container take only the first 2 items and then start a new line aka a new row and put the 3rd element in there and ofc If I add a 4th element, that 4element goes with the 3rd so:

grid of 1fr 1fr
cols: 1st  | 2nd
row1: <p>  | <p>
row2: <p>  | <p>

got it?

also, float:right; is a BAD OPTION, DON'T USE IT FOR LAYOUT!!!

Answer 3

Use flexbox on parent component.

.explainer-container {
  position: relative;
  overflow: hidden;
  /*height: 47vh;*/
  top: 9vw;
  z-index: 11;

  max-width: 70vw;
 
  background-color: rgba(6, 0, 15, 0.6);
  padding: 0;
  font-size: 1.25vw;
  border-radius: 1rem;
  box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, .3), 0 0.0625rem 0.125rem rgba(0, 0, 0, .2);
  margin-left: auto;
  margin-right: auto;
}
.explain-header {
  padding: 1.2em 1em;
  color: #e9e4f0;
  display: flex;
  justify-content:space-between;
}
#phrase {
   font-family: "Open Sans Bold";
   color: #ff9100;
}
#colon {
  font-family: "Vazir-Bold";
  color: #ff0033;
}
#en-definition{
  font-family: "Open Sans Light";
   color: #f0ede9;
}
#title-synonym {
  font-family: "Open Sans Bold";
  font-size: 1vw;
   color: #4287f5;
}
#synonym {
   font-family: "Open Sans Regular";
   font-size: 1vw;
   color: #b0bfd9;
}
.sample-sentence {
  display: grid;
  justify-content: start;
  max-width: 50%;
  margin: 0 !important;
}

.rtl-sample  {
  font-family: "Vazir-Thin";
  font-size: 0.9vw;
  margin-top: 1vh;
   margin-bottom: 0;
  direction: rtl;

}
.eng-sample {
  font-family: "Open Sans Regular";
  font-size: 1.2vw;
  color: #eee6f0;
  margin-bottom: 0;
}


/*Explain Styles*/
.rtl-container {
  overflow: hidden;
  max-width: 35vw;
  max-height: 47vh;
  width: 40vw;
  z-index: 11;
  outline: 0.1vw dashed orange;
  top: 0;
  right: 0;
  padding: 0.5em 0em;
  align-self: flex-start;
}

.rtl-explain {
    position: relative;
    font-family: "Vazir-Thin";
    direction: rtl;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
    text-align: right;
    width: 100%;
    font-size: 1vw;
    color: rgb(248, 247, 250);
    opacity: 0;  
    margin: 0 auto;
}

<div class="explainer-container">

  <div class="explain-header">
    <div class="ltl-container">
    <span id="phrase">to make up for</span>
    <span id="colon">:</span>
    <span id="en-definition">to prepare for sth</span>
    <br>
    <span id="title-synonym">synonym(s):</span>
    <span id="synonym">to prepare - to plan</span>
<div class="sample-sentence">
              <p class="eng-sample">I could make up a bed for you on the sofa.</p>
              <p class="rtl-sample">ی رختخواب روی کاناپه برات آماده می کنم.</p>
            </div>
    </div>

    <div class="rtl-container">
      <p id="rtl-explain" class="rtl-explain captionShow">
        <ul>
          <li>بهترین روش برای ما استفاده از این <span class="colored">I</span> <span class="colored">will</span> <span class="colored">be</span> <span class="colored">+</span> <span class="colored">ing</span> هست.</li>
          <li>در تمام این روش ها ما داریم از <span class="colored">رنگ های مختلف</span> استفاده می کنیم. به امید دیدار... <span class="round-bracket">( </span>ارادتمند شما<span class="round-bracket"> )</span></li>
          <li>در تمام این روش ها ما داریم از <span class="colored">رنگ های مختلف</span> استفاده می کنیم. به امید دیدار... <span class="round-bracket">( </span>ارادتمند شما<span class="round-bracket"> )</span></li>
          <li>در تمام این روش ها ما داریم از <span class="colored">رنگ های مختلف</span> استفاده می کنیم. به امید دیدار... <span class="round-bracket">( </span>ارادتمند شما<span class="round-bracket"> )</span></li>
          <li>در تمام این روش ها ما داریم از <span class="colored">رنگ های مختلف</span> استفاده می کنیم. به امید دیدار... <span class="round-bracket">( </span>ارادتمند شما<span class="round-bracket"> )</span></li>
          <li>ادامه دارد این ماجرا</li>
        </ul>
      </p>
    </div>
  </div>

</div>