html - 从 flex 显示中消除横向滚动条

Question

我正在使用 flex 显示模式尝试一些事情，在实现嵌套在固定宽度 div 元素中的屏幕宽度 div 元素时遇到了这个问题。

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>

当内容超出屏幕高度时，浏览器(Firefox 57)除了提供垂直滚动条外，还提供横向滚动条。有没有办法消除横向滚动条？

Answer 1

尝试:

overflow-x: hidden;

例如:

#overdiv {
   overflow-x: hidden;
}