#Having issues with css sizing for parent div

15 messages · Page 1 of 1 (latest)

coral hinge
#

As the title suggests, I am having issues with the styling of a parent div in a way that it uses x% of screen width. I want the section to use 100% of the screen width, the child use 80% of the parent. Finally the two children within that child to split equally. As of right now, everything is doing what i want it to, apart from the section element not using 100% of the viewport width. I have tried using -webkit-fill-available (i think it was called like that) among others to no result.

The component is rendered dynamically in a different component.
Here is the html and css for the one having issues

<section class="topList-section">
  <main class="topList-main">
    <div class="artists-list">
      <h2 class="toph2">Top Artists</h2>
      <ol>
        @for (artist of artists; track $index) {
        <li>{{ artist }}</li>
        }
      </ol>
    </div>

    <div class="tracks-list">
      <h2 class="toph2">Top Tracks</h2>
      <ol>
        @for (track of tracks; track $index) {
        <li>{{ track }}</li>
        }
      </ol>
    </div>
  </main>
</section>

and css

.topList-section {
  width: 100vh; /* I think this is the stubborn one */
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.topList-main {
  display: flex;
  background-color: var(--white);
  min-width: 80vh;
  height: fit-content;
  justify-content: space-between;
}

.artists-list,
.tracks-list {
  flex-basis: 45%;
  display: flex;
  flex-direction: column;
  background-color: var(--secondary-color);
  border-radius: 25;
}

.artists-list {
  margin-right: 20px;
}

.toph2 {
  color: var(--accent-color);
  font-weight: bold;
  font-size: 4rem;
}

i can also provide with the parent component but it doesnt have any specific styling for this component and doesnt have any parents around the portal.
Thanks.

warm saddle
#

Section parent has width set or not?

coral hinge
#

it has it set

#

here is the visualised thing if it helps

image.png
#

i want the green boxes to cover a larger area but it is stubborn and doesnt do it

#

the section doesnt use the full width available, and when i use 100vw it has an x overflow scrollbar

coral hinge
warm saddle
#

html, body has 100% width set? Because width is always taking from parent percentage?

coral hinge
#

though im not sure about html let me check rq

warm saddle
coral hinge
#

i had set it to vh just before the screenshot to test out this option, since 100vw had overflow issue for some reason

#

i have altered the body ruleset in the root css ill check rq

#

i can provide with the link to the website, though to see the component a spotfiy authorisation is required, but the app is in dev mode so it asks for email whitelist for some reason

coral hinge