How to keep child element with overflow-x: scroll from changing the width of parent element-CodePudding

I'm working on making a scrollable navbar on an element. It keeps changing the parent element's width by trying to fit the entire content inside instead of hiding the remaining element. The parent element is inside another parent element grid with the property of grid-template-columns: as 3fr 2fr.

I'm assuming that since the width of the parent element that the scrollable navbar is inside a grid with fractional units, it does not have a defined width. My goal is to have the scrollable nav hide the contents that don't fit in the width of the parent. I have recreated the issue in a codepen if it's easier to see: overflow-x scroll issue codepen. Any help is appreciated!

HTML:

<body>
<main class='main'>
    <section class='container'>
      <h1>This is the container with ul that overflows content</h1>
      <ul >
        <li><a href="#">One</a></li>
        <li><a href="#">Two</a></li>
        <li><a href="#">Three</a></li>
        <li><a href="#">Four</a></li>
        <li><a href="#">Five</a></li>
        <li><a href="#">Six</a></li>
        <li><a href="#">Seven</a></li>
        <li><a href="#">Eight</a></li>
        <li><a href="#">Nine</a></li>
        <li><a href="#">Ten</a></li>
        <li><a href="#">Eleven</a></li>
        <li><a href="#">Twelve</a></li>
        <li><a href="#">Thirteen</a></li>
        <li><a href="#">Fourteen</a></li>
        <li><a href="#">Fifteen</a></li>
        <li><a href="#">Sixteen</a></li>
        <li><a href="#">Seventeen</a></li>
        <li><a href="#">Eighteen</a></li>
        <li><a href="#">Nineteen</a></li>
        <li><a href="#">Twenty</a></li>
      </ul>
    </section>
    <aside >
      <h1>This is the content</h1>
    </aside>
  </main>
</body>

CSS:

.main {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 1.5rem;
  max-width: 1024px;
  margin-inline: auto;  
}
.container, .aside {
  border: solid 1px gray;
}

.ul {
  display: flex;
  list-style: none;
  padding: 0;
  overflow: hidden;
  overflow-x: scroll;
  width: 100%;
}

.ul li {
  padding: 0.4rem 0.5rem;
}

I've tried changing the width of the scrollable navbar from a percentage to a defined value, and it works.

CodePudding user response：

You need to constrain the max-width of the section with class container. It's the direct parent of the ul and so because it's seemingly allowed to be whatever size it wants (will have to look more into why that is, though), it opts to be the size that would fit all of its child content, so > 1024px.

Restricting the section's max-width itself seems to make it so the scrolling behaviour returns and the width is capped at the desired size.

ex.

.container {
  max-width: 1024px;
}

CodePudding user response：

Here's an example of how you can give the .ul element a fixed width that is smaller than the width of the .container element:

.main {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 1.5rem;
  max-width: 1024px;
  margin-inline: auto;  
}
.container, .aside {
  border: solid 1px gray;
}
.container {
  width: 100%;
}
.ul {
  display: flex;
  list-style: none;
  padding: 0;
  overflow-x: scroll;
  max-width: 80%; /* this will be 80% of the container's width */
}

.ul li {
  padding: 0.4rem 0.5rem;
}

<body>
<main class='main'>
    <section class='container'>
      <h1>This is the container with ul that overflows content</h1>
      <ul >
        <li><a href="#">One</a></li>
        <li><a href="#">Two</a></li>
        <li><a href="#">Three</a></li>
        <li><a href="#">Four</a></li>
        <li><a href="#">Five</a></li>
        <li><a href="#">Six</a></li>
        <li><a href="#">Seven</a></li>
        <li><a href="#">Eight</a></li>
        <li><a href="#">Nine</a></li>
        <li><a href="#">Ten</a></li>
        <li><a href="#">Eleven</a></li>
        <li><a href="#">Twelve</a></li>
        <li><a href="#">Thirteen</a></li>
        <li><a href="#">Fourteen</a></li>
        <li><a href="#">Fifteen</a></li>
        <li><a href="#">Sixteen</a></li>
        <li><a href="#">Seventeen</a></li>
        <li><a href="#">Eighteen</a></li>
        <li><a href="#">Nineteen</a></li>
        <li><a href="#">Twenty</a></li>
      </ul>
    </section>
    <aside >
      <h1>This is the content</h1>
    </aside>
  </main>
</body>