0

I'm trying to build a responsive header component for a site. The header has position: fixed so that it doesn't scroll, but contains a horizontally scrolling list of options.

I used this tutorial to build the horizontally-scrolling internals so that the list of header items could be scrolled but no scrollbar would be displayed. Check out the code below, and see it working in this fiddle.

HTML

<body>
    <main class="fixed-container">
        <div class="scroll-container">
            <ul class="scroll-list">
                <li>Item 1</li>
                <li>Item 2</li>
                <li>Item 3</li>
            </ul>
        </div>
    </main>
</body>

CSS

.fixed-container {
  position: fixed;
  height: 75px;
  overflow: hidden;
  right: 0;
  left: 0;
  border-bottom: 2px solid black;
}
.scroll-container {
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  box-sizing: content-box;
  padding-bottom: 17px;
}
.scroll-list {
  list-style: none;
  display: flex;
  height: 100%;
  width: 1000px;
  margin: 0;
  padding-left: 0;
}
.scroll-list li {
  flex: 1 0;
  text-align: center;
  padding-top: 2em;
  border-bottom: 2px solid red;
  margin-left: 5px;
  margin-right: 5px;
}

<div class="scroll-container">, with height: 100%, fills the height of the <main class="fixed-container"> as expected. However the <ul> within the div, which also has height: 100%, does not fill the height of its parent. There is space between the red borders at the bottom of the <li>s within and the black border at the bottom of the <main class="fixed-container">.

Note that if overflow-x: auto and overflow-y: hidden are removed from <div class="scroll-container">, or if right: 0 is removed from <main class="fixed-container"> then the heights behave as expected and the red borders are flush with the top of the black border.

How can I get the <ul> to fit the height of its parent so that the red borders sit directly on top of the black border?

Community
  • 1
  • 1
jesse501
  • 13
  • 1
  • 6

1 Answers1

0

You can achieve the desired effect by changing the .scroll-container rule like this, where instead of setting a bottom padding, you increase its height

.scroll-container {
  height: calc(100% + 17px);
  overflow-x: auto;
  overflow-y: hidden;
}


.fixed-container {
  position: fixed;
  height: 75px;
  overflow: hidden;
  right: 0;
  left: 0;
  border-bottom: 2px solid black;
}
.scroll-container {
  height: calc(100% + 17px);
  overflow-x: auto;
  overflow-y: hidden;
}
.scroll-list {
  list-style: none;
  display: flex;
  height: 100%;
  width: 1000px;
  margin: 0;
  padding-left: 0;
}
.scroll-list li {
  flex: 1 0;
  text-align: center;
  padding-top: 2em;
  border-bottom: 2px solid red;
  margin-left: 5px;
  margin-right: 5px;
}
 <main class="fixed-container">
  <div class="scroll-container">
   <ul class="scroll-list">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
   </ul>
  </div>
 </main>
Asons
  • 84,923
  • 12
  • 110
  • 165
  • Thanks, LGSon, this does work! I'm going to hold out in the hope that another solution can explain the problem and propose a solution that doesn't involve experimental CSS tech, but very much appreciate the help. – jesse501 Apr 18 '17 at 14:26
  • @jesse501 Well, [CSS Calc](https://drafts.csswg.org/css-values-3/#functional-notations) is not _experimental_ in that manner that it will stop working, so no worries there. Its been around since IE9, and has much better browser support than the `flexbox` you use, so you most likely won't get a better solution to the problem – Asons Apr 18 '17 at 15:09
  • @jesse501 Let me know if my answer worked, or were helpful, and can be accepted and/or upvoted, or else I delete it. – Asons Jun 06 '17 at 04:24