How to set width of a DIV to 100% if it is in a scrollable parent DIV?-CodePudding

Would like to set the width of child_sub DIV 100% width so that even if I scroll the parent DIV horizontally, the child_sub DIV should cover the parent DIV's whole width.

Here's the code:

.main {
    overflow-x: scroll;
    white-space: nowrap;
    width: 100%;
}
.main_sub {
  width:100%;
}
.main_sub_sub {
  display:inline-block;
  width:50px;
}
.child_sub {
  width:100%;
  background:darkred;
  color:white;
}

<div class="main">
  <div class="main_sub">
    <p class="main_sub_sub">1</p>
    <p class="main_sub_sub">2</p>
    <p class="main_sub_sub">3</p>
    <p class="main_sub_sub">4</p>
    <p class="main_sub_sub">5</p>
    <p class="main_sub_sub">6</p>
    <p class="main_sub_sub">7</p>
    <p class="main_sub_sub">8</p>
    <p class="main_sub_sub">9</p>
    <p class="main_sub_sub">10</p>
    <p class="main_sub_sub">11</p>
    <p class="main_sub_sub">12</p>
    <p class="main_sub_sub">13</p>
    <p class="main_sub_sub">14</p>
    <p class="main_sub_sub">15</p>
    <p class="main_sub_sub">16</p>
    <p class="main_sub_sub">17</p>
    <p class="main_sub_sub">18</p>
    <p class="main_sub_sub">19</p>
    <p class="main_sub_sub">20</p>
  </div>
  <hr>
  <div class="child_sub">
    <div>
    some
    </div>
  </div>
</div>

Here's the fiddle to play around

As you can see in the fiddle, if I scroll the parent main DIV the child_sub DIV which is set at 100% only covers till 10th field in the main DIV. I m trying to default set the child_sub DIV to cover the full length of main DIV.

I have come across the SO answer regarding the same query which told me to add display:table-row to the child_sub, But unfortunately, I couldn't make it work by myself.

SO Query over the same

Any Help is greatly appreciated.

CodePudding user response：

.child_sub already has 100% width of the parent, overflow does not change dimensions of a div.

There are multiple ways to achieve the same result, The easiest being to remove the .child_sub from within the scroll

Another method is to add position: absolute to .child_sub

CodePudding user response：

Right below your .main set a container with display:grid;.

<div class="main">
  <div class="grid">
    <div class="main_sub"></div>
    <div class="child_sub"></div>
  </div>
</div>

This way it will take the whole width.

.grid{
  display:grid;
}
.grid hr {
  width: 100%;
}

DEMO:

.main {
    overflow-x: scroll;
    white-space: nowrap;
    width: 100%;
}
.grid{
  display:grid;
}
.grid hr {
  width: 100%;
}
.main_sub {
  width:100%;
}
.main_sub_sub {
  display:inline-block;
  width:50px;
}
.child_sub {
  width:100%;
  background:darkred;
  color:white;
}

<div class="main">
  <div class="grid">
    <div class="main_sub">
      <p class="main_sub_sub">1</p>
      <p class="main_sub_sub">2</p>
      <p class="main_sub_sub">3</p>
      <p class="main_sub_sub">4</p>
      <p class="main_sub_sub">5</p>
      <p class="main_sub_sub">6</p>
      <p class="main_sub_sub">7</p>
      <p class="main_sub_sub">8</p>
      <p class="main_sub_sub">9</p>
      <p class="main_sub_sub">10</p>
      <p class="main_sub_sub">11</p>
      <p class="main_sub_sub">12</p>
      <p class="main_sub_sub">13</p>
      <p class="main_sub_sub">14</p>
      <p class="main_sub_sub">15</p>
      <p class="main_sub_sub">16</p>
      <p class="main_sub_sub">17</p>
      <p class="main_sub_sub">18</p>
      <p class="main_sub_sub">19</p>
      <p class="main_sub_sub">20</p>
    </div>
    <hr>
    <div class="child_sub">
      <div>
      some
      </div>
    </div>
  </div>
</div>