Parents, children, and inherit help!

Projects
,
1

Hi all, hopefully a silly misunderstanding and a quick fix here:

Basically I’ve been working on the Cheat Sheet Challenge Project from the front end web dev career path, and I am having some issues with the sticky position. This is a link to the project within the codeacademy code editor. I’m working on a larger project in VScode but I trimmed it down and put it there for your viewing convenience.

I have a nav list that I would like to stick to the side of the page while the user scrolls through the main document. This works great when the ol isn’t wrapped, but when I put a nav around it to be semantic, the nav {height: } equals the ol {height:} and there goes the space to move. I thought that since the nav ol is within the article, nav{height: inherit} Would set the height of the nav to the height of the article, but I guess the only parent of nav ol is nav? I am a little confused about parent child relationships.

Here is the basic situation, I’ve tried to include only the code that is relevant. Once again there is the codecademy project linked above if I missed something crucial.

<article class="needs-js-ig" id="Fundamentals">
        <h3>Fundamentals</h3>
        <nav class="sticky" aria-label="tertiary">
          <ol class="h3-wide word-border side-nav">
            <a href="#basic-structure"><li>Very Basics</li></a>
            <a href="#head"><li>Head</li></a>
            <a href="#semantic-html"><li>Semantic HTML</li></a>
            <a href="#data-structures"><li>Data Structures</li></a>
            <a href="#links"><li>Links</li></a>
          </ol>
        </nav>
        <section class="word-doc word-border">
          </section>
...
</article>

article {
  height: fit-content;
}

article.needs-js-ig { /* The purpose of this is to change the main content of the webpage, the article, without reloading the navs and the header and the footer*/
  border: 1px dotted red;
  padding: 20px;
  margin: 20px;
}

nav {
  position: absolute;
  width: fit-content;
  z-index: 10;
}

nav.sticky {
  display: flex;
  height: inherit;
}

ol.h3-wide {
  position: sticky;
  top: 15%;
  left: 5%;
}

Essentially IDK why height: inherit doesn’t work for nav.sticky, since it is the direct child of article.needs-js-ig. Either I am wrong about parents and children, or I am wrong about how inherit works, either way, is there a solution so that I can make the height of the nav bar equal to the height of the article so that the sticky attachment might work?

At the moment removing the nav wrapper solves the problem but I would rather learn why.

2

Technically, that is the default. It is a rare occasion we need to use this property, and right now, I’m out of examples. It would be a sticky situation, nonetheless, something to bring up later. Well, okay, now then…

Say we have a container with a selector rule for height defined in a class. Our selector rule would need to circumvent that class rule for this particular element, which we would do with an overriding rule to inherit from the parent. I told you it would be sticky.

3

I’ve used the inherit in circumstances where a larger rule is cascading, such as
a { color: inherit; text-decoration: none; }

I never did figure out whether nav,sticky was inheriting a height that was too little, or whether it wasn’t actually a child. I ended up doing a lot of research into layout and have come to the conclusion that grid layout is just the best course of action for most layout scenarios and I was able to use it to solve the problem here. Maybe you could let me know if grid layout has any downsides or whether its better to use grid: or grid-column: or maybe grid-template-…

4

Grid is an improvement in both control and workflow as near as I can tell. Without having a direct experience using it one cannot comment. There are no downsides that I have heard of.