i have to mimic the functionality of a file explorer and in it i want the sub element to occupy the entire width of the element

Issue

I need to mimic a file explorer on the web, I need the element inside the div to change the background color of the entire container when hovered on like this

but i can only seem to manage to get to this

the html looks something like this

<div className="folder" onClick={() => handleTogglerotation("folder")}>
                <!-- some svg goes here -->
                <p className="subtitle">folder1</p>
            </div>
            <div className="folder-content">
                <div className="line"></div>
                <div className="file-section">
                    <div className="file-container">
                        <!-- some svg goes here -->
                        </svg>
                        <p>file1.md</p>
                    </div>
                    <div className="file-container">
                        <!-- some svg goes here -->
                        <p>file2.md</p>
                    </div>
                </div>


            </div>

i get that this has to do with the size of the element itself but is there any way to acheive the one mentioned before

i have tried

• place the file container over the line via z-index and then try to get it to occupy the whole width of parent
• add width to file container via calc() but that doesnt seem to work very well

what would be the best approach to achieve something like this?

Solution

Without providing the CSS too, or some idea of how your divs are sized, it is very hard to make assumptions, and you'll most likely not get your problem solved.

However, I'm gonna try and make some assumptions about your situation:

Assumption number 1 Your problem is related to the fact you don't know how to make the file-section div go over the line div, in this case, it's simple, just make the line one absolutely positioned:

.overall-container {
  background-color: black;
  padding-top: 10px;
  padding-bottom: 10px;
}

p {
  margin: 5px 0 0 0;
  color: white;
}

.folder {
  margin-left: 30px;
}
.folder-content {
  position: relative;
  //this is necessary so that the height of the line div takes this divs height into consideration and not the one of the body element
}

.line {
  position: absolute;
  margin-left: 30px;
  width: 0;
  height: 100%;
  border-left: 1px solid white;
}

.file-section {
  width: 100%;
}
.file-container {
  width: 100%;
}
.file-container:hover {
  background-color: #313131;
  cursor: pointer;
}
.file-container p {
  margin-left: 40px;
}

<div class="overall-container">
  <div class="folder">
    <!-- some svg goes here -->
    <p class="subtitle">folder1</p>
  </div>
  <div class="folder-content">
    <div class="line"></div>
    <div class="file-section">
      <div class="file-container">
        <!-- some svg goes here -->
        <p>file1.md</p>
      </div>
      <div class="file-container">
        <!-- some svg goes here -->
        <p>file2.md</p>
      </div>
    </div>
  </div>
</div>

Assumption number 2 Your problem is related to the fact you are confined into working into an already smaller div, in which case, if you know the distance between your confined div and the left side of the screen, you can set the margin of your file-containers to that exact value, but negative, and their width to width: calc(100% + value).

Let me know if this is the case, and you want a better explanation, or if it's an entirely different case. P.S. in the future, please add all relevant code, including the relevant CSS, preferably in a code snippet like I just did

Answered By - Isidor