Html Question posted in
Some basic documentation can be found here.

Html – How to set width of a inner div to 100% of scrollable parent DIV?

I want to inner div gets all width of scrollable parent div, this is my sample code:

<div class="col-6 flex-column gap-8px overflow-x-scroll">

  <div class="d-flex w-100 p-3 border bg-warning rounded col-12">
    <span class="col-4 bg-info m-2">col 1</span>
    <span class="col-4 bg-info m-2">col 2</span>
    <span class="col-4 bg-info m-2">col 3</span>
    <span class="col-4 bg-info m-2">col 4</span>
  </div>

</div>

and the result:

How i can fix this ?

Tags:

2

Answers


  1. 0

    To set the width of an inner <div> to 100% of its scrollable parent <div>, you need to ensure that the parent <div> is scrollable (i.e., it has content that overflows) and that the inner <div> is styled appropriately to inherit the width.

    Here’s how you can do this:

    1. Make sure the parent <div> is scrollable
      For a parent <div> to be scrollable, you can set its overflow property to auto (or scroll), and specify a fixed width or height if necessary.

    2. Set the inner <div> width to 100% of the parent
      Once the parent is scrollable, you can simply set the width of the inner <div> to 100% to make it match the width of the parent.

    html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Scrollable Parent</title>
    <style>
        /* Parent div - make it scrollable */
        .parent {
            width: 300px;          /* Fixed width */
            height: 200px;         /* Fixed height */
            overflow: auto;        /* Make it scrollable */
            border: 1px solid #000;
        }

        /* Inner div - set width to 100% of parent */
        .inner {
            width: 100%;           /* Set width to 100% of parent */
            height: 300px;         /* Height is more than parent to cause scrolling */
            background-color: lightblue;
        }
    </style>
</head>
<body>

<div class="parent">
    <div class="inner">
        <!-- Content that is wider than the parent -->
        <p>This is the content of the inner div. Scroll to see more!</p>
    </div>
</div>

</body>
</html>
    Login or Signup to reply.
  2. 0

    The problem is caused by using two wrappers instead of one, as per the hint from @Mike’Pomax’Kamermans.

    .bg-pink {
  overflow: auto;
  background: pink;
  border: 3px solid red;
}

.bg-gold {
  background: gold;
  display: flex;
  gap: 1em;
  padding: 1em;
}

.d1 {
  overflow: auto;
  border: 3px solid red;
  background: gold;
  display: flex;
  gap: 1em;
  padding: 1em;
}

span {
  background: cyan;
  width: 30%;
  flex-shrink: 0;
}
    <p>Scroll the panels below to the right.</p>
<p>This example is based on your HTML structure. As you scroll right, the gold background does not extend the full width. You'll also note that there is no padding between column 4 and the red border.</p>
<div class="bg-pink">
  <div class="bg-gold">
    <span>col 1</span>
    <span>col 2</span>
    <span>col 3</span>
    <span>col 4</span>
  </div>
</div>


<p>Both the above problems result from using two wrapper elements instead of one. The solution is to combine them.</p>
<div class="d1">
  <span>col 1</span>
  <span>col 2</span>
  <span>col 3</span>
  <span>col 4</span>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search