0

I have a top nav bar which has two children: one that contains the icon and another one that contains the nav options. Since the nav options are variable and longer than the viewport, I'd like to enable that to be horizontally scrollable.

Here is the JSFiddle that shows it: https://jsfiddle.net/zhbx2ert/3/

HTML:

<div class="parent">
    <div class="iconspace">
         ¯\_(ツ)_/¯
    </div>
    <div class="rest">
        <ul>
            <li>A</li>
            <li>B</li>
            <li>C</li>
            <li>D</li>
            <li>E</li>
            <li>F</li>
            <li>G</li>
            <li>H</li>
            <li>I</li>
            <li>J</li>
            <li>K</li>
            <li>L</li>
        </ul>
    </div>
</div>

CSS

body {
  background: teal;
}

.parent {
    width: 100%;
    height: 80px;
    background: mistyrose;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0 2em;
    border-radius: 50px;
    position: relative;
}

.iconspace {
    width: 100px;
    background: slategray;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.rest {
    width: calc(100% - 100px);
    height: 100%;
    background: papayawhip;
    overflow-x: auto;
    position: relative;
}

ul {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    list-style-type: none;
    height: 100%;
    width: 100%;
    margin: 0;
}

li {
    border: 1px solid brown;
    border-radius: 50%;
    min-height: 32px;
    min-width: 32px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin: 0 1em;
    color: crimson;
}

The problem you'll notice in the demo is that the first few items of the list are never visible. I am not sure why the list doesn't start at the beginning of the parent but instead starts at the beginning of the grandparent.

Any ideas are much appreciated!

geoboy
  • 1,172
  • 1
  • 11
  • 25
  • @Michael_B well, this one is lot better than my tiny answer :p – Temani Afif May 19 '18 at 01:19
  • I thought you wrote a similar answer to mine once. I remember you once posted something like: *"If you want one solution, see here. If you want a more detailed solution, see here."* I left it open in case you wanted to dupe with yours. @TemaniAfif – Michael Benjamin May 19 '18 at 01:22
  • 1
    @Michael_B yes I wrote this one https://stackoverflow.com/questions/49278725/centered-flex-container-grows-beyond-top but it was about vertical centring and I forget that your answer deal also with horizontal centring ;) – Temani Afif May 19 '18 at 01:27
  • 1
    @Michael_B and yes it was about this question I closed https://stackoverflow.com/questions/50019732/unexpected-scrolling-behavior-within-flex-element?noredirect=1&lq=1 ... I think it's good sometimes to show the *easy-fast* solution (mine :p) and the *more-deep-that-need-a-coffee-to-read* solution (yours :p) – Temani Afif May 19 '18 at 01:29
  • Yes, those were the ones. Good references. And I agree, often people just want the solution and don't have time or interest in the explanation. @TemaniAfif – Michael Benjamin May 19 '18 at 01:36
  • Thanks! So, if I understand it properly, in case of overflow with flexbox, use `margin` rather `justify-content`? And still not sure why the overflowing container is not starting at the right spot? – geoboy May 19 '18 at 01:41

0 Answers0