CODEWITHSUNDEEP
cssflexbox
Elias Garcia
Elias Garcia

Reputation: 7282

Elements overflowing viewport and causing horizontal scroll

I'm trying to do a static HTML & CSS webpage using flexbox but my conten doesn't fit into the window in Chrome browser. I can scroll horizontally, so I have more space horizontally than the browser window size.

This is an screenshot showing the problem. The margins are the same in the two sides of the wrapper, but the content is not fitted to 100% width of the browser window, so I can scroll horizontally, which is not what I want.

enter image description here

I've tried the same code in Safari and works perfectly. Is this an issue with flexbox in Chrome or what am I missing? Thanks.

This is my HTML:

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- CSS Stylesheets-->
  <link rel="stylesheet" href="css/vendor/normalize.css">
  <link rel="stylesheet" href="css/vendor/font-awesome.css">
  <link rel="stylesheet" href="css/vendor/devicons.css">
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
  <!-- Header -->
  <header>
    <nav>
      <ul>
        <li><a href="#" class="active">ELEMENT 1</a></li>
        <li><a href="#">ELEMENT 2</a></li>
        <li><a href="#">ELEMENT 3</a></li>
      </ul>
    </nav>
  </header>
  <!-- Main Content -->
  <main>
    <div class="main-wrapper">
      <div class="search-bar">
        <form>
          <input type="text" placeholder="Search">
        </form>
      </div>
    </div>
  </main>
</body>

And this is my SCSS:

/* 2. HEADER */
nav {
  width: 100%;
  text-align: center;
  background-color: $dark-grey;
  & ul {
    max-width: $width;
    margin: auto;
    display: flex;
  }
  & li {
    flex: 1 1 0;
  }
  & a {
    display: block;
    color: $white-alpha;
    padding: 30px 0px;
    transition: color 0.3s ease;
  }
  & a:hover {
    color: $white;
    transition: color 0.3s ease;
  }
  & a.active {
    color: $white;
  }
}

/* 3. MAIN*/
main {
  background-color: $light-grey;
  padding: 30px 0px;
}

.main-wrapper {
  max-width: $width;
  margin: auto;
}

/* 3.1. SEARCH BAR */
.search-bar {
  padding-bottom: 20px;
  & input {
    height: 45px;
    width: 100%;
    border-bottom: 1px solid $medium-grey;
    border-radius: 2px;
    text-indent: 20px;
  }
}

Upvotes: 0

Views: 1751

Answers (1)

sheriffderek
sheriffderek

Reputation: 9043

As far as I can tell, your margins and box-model are likely the problem + you are using the & improperly.

You may also want to look into the default page margin and setting the box-model to border-box site wide.

https://www.paulirish.com/2012/box-sizing-border-box-ftw/

For questions like these, make a CodePen or jsFiddle etc, with only the bare bones of what is needed to recreate the situation you are having trouble with. http://codepen.io/sheriffderek/pen/e76eb24c23c789accffe6a18fcfdd8c0 - even my example has more style than needed...

One more suggestion - if you are new to flex-box, it really helped me to write out the individual properties like flex-grow flex-shrink flex-basis instead of the short-hand + always explicitly set the flex-direction or any other defaults.

html { // sort out box-model
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

body { // reset body margin default
  margin: 0;
}

a {
  text-decoration: none;
  color: inherit;
}

html {
  background: lightblue;
}

header, main {
  padding: 1rem;
}


header {
  background: white;
}

nav {
  ul {
    list-style: none;
    margin: 0;
    padding: 0;

    display: flex;
    flex-direction: column;

    @media (min-width: 500px) {
        flex-direction: row;
    }
  }
  li {
    flex: 1 1 0;
  }
  a {
    display: block;
    padding: 1rem;
    &:hover {
      background: black;
      color: white;
    }
    &.actiive {
      color: red;
    }
  }
}

main {
  background: gray;
}

.main-wrapper {
  max-width: 960px;
  margin: auto;
}

.search-bar {
  //
  input {
    height: 45px;
    width: 100%;
    text-indent: 20px;
    background: black;
    color: white;
    border: 1px solid black;
  }
}

Upvotes: 1

Related Questions