CODEWITHSUNDEEP
cssoverridingparent-child
User12322341232142
User12322341232142

Reputation: 93

Override parent's max-width from child css

I am using VuePress for docs and for the home page I wanted something more customizable. My problem is that the class .theme-default-content has a max-width of 740px, if I override this class and change it's max-width, it'll mess up all the other pages too not only the main page, since on VuePress all pages are linked to the main theme.
What I want is the child class that'll be inside header to extend with width: 100% of the page.
Currently this would doesn't work, no matter how much I try it'll never override it. I could make it absolute but that'll create even more problems.
Is there a way to override the parent's property from inside?

Upvotes: 2

Views: 7401

Answers (1)

Obsidian Age
Obsidian Age

Reputation: 42304

You cannot override the parent styles with child styles in CSS, as there is no parent selector in CSS.

However, you don't need to override anything to give the child element a width that spans 100% of the viewport; simply use the viewport unit vw as width: 100vw:

body {
  margin: 0;
}

.outer {
  height: 100px;
  width: 200px;
  max-width: 200px;
  background: red;
  padding: 25px;
}

.inner {
  height: 100px;
  width: 100vw;
  background: blue;
}
<div class="outer">
  <div class="inner"></div>
</div>

Notre that if you have padding on the parent, you may want to subtract this from the width of the viewport (so that there are no horizontal scrollbars). This can be done with calc():

body {
  margin: 0;
}

.outer {
  height: 100px;
  width: 200px;
  max-width: 200px;
  background: red;
  padding: 25px;
}

.inner {
  height: 100px;
  width: calc(100vw - 25px);
  background: blue;
}
<div class="outer">
  <div class="inner"></div>
</div>

Upvotes: 6

Related Questions