CODEWITHSUNDEEP
htmlcssflexbox
anark10n
anark10n

Reputation: 137

Eliminate sideways scroll bar from flex display

I'm trying out a few things with the flex display mode and I came across this issue when implementing screen-width div elements nested inside a fixed width div element.

html,
body {
  margin: 0;
}

#overdiv {
  position: relative;
}

.landing {
  display: table;
  width: 100%;
  height: 100%;
  background-color: #002699;
}

.content {
  width: 1000px;
  margin: 0 auto;
}

.wide-flex {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
}

.wide-head {
  display: flex;
  background-color: grey;
  box-sizing: border-box;
  justify-content: center;
  align-items: center;
  width: 100vw;
}

.container h2 {
  color: white;
  opacity: 0.9;
  text-align: center;
  font-size: 50px;
  padding: 10px 10px;
  border-radius: 5px;
}
<div id="overdiv">
  <section class="landing">
    <div class="container">
      <div class="content">
        <div class="wide-flex">
          <div class="wide-head">
            <h2>Header 1</h2>
          </div>
        </div>
        <p>
          <!--filler text -->
        </p>
      </div>
      <div class="content">
        <div class="wide-flex">
          <div class="wide-head">
            <h2>Header 1</h2>
          </div>
        </div>
        <p>
          <!--filler text -->
        </p>
      </div>
      <div class="content">
        <div class="wide-flex">
          <div class="wide-head">
            <h2>Header 1</h2>
          </div>
        </div>
        <p>
          <!--filler text -->
        </p>
      </div>
      <div class="content">
        <div class="wide-flex">
          <div class="wide-head">
            <h2>Header 1</h2>
          </div>
        </div>
        <p>
          <!--filler text -->
        </p>
      </div>
    </div>
  </section>
</div>

When the content exceeds the screen height, the browser (Firefox 57) provides a sideways scroll bar in addition to the vertical scroll bar. Is there a way to eliminate the sideways scroll bar?

Upvotes: 0

Views: 48

Answers (1)

Sam Hasler
Sam Hasler

Reputation: 12627

Try:

overflow-x: hidden;

e.g:

#overdiv {
   overflow-x: hidden;
}

Upvotes: 1

Related Questions