ビューポートがオーバーフローして水平スクロールが発生する

flexboxを使用して静的なHTML & CSS Webページを作成しようとしていますが、私のcontenがChromeブラウザのウィンドウに収まりません。私は水平にスクロールすることができるので、ブラウザのウィンドウサイズよりも水平方向に多くのスペースがあります。ビューポートがオーバーフローして水平スクロールが発生する

これは問題を示すスクリーンショットです。ラッパーの両面ではマージンは同じですが、コンテンツはブラウザウィンドウの100％幅に収まらないため、横方向にスクロールすることができますが、これは私が望むものではありません。

私はSafariで同じコードを試してみましたが、完璧に動作しました。これはChromeのフレックスボックスの問題ですか、何が欠けていますか？ありがとう。

これは私の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>

そして、これが私の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; 
    } 
}

出典

2017-03-10 Elias Garcia

この問題を複製するcodepenまたはjsfiddleを作成することができれば、多くの場合役に立ちます。 –

私の知る限り、あなたのマージンとボックスモデルは、可能性の高い問題です+あなたが使用しています&が正しくありません。

デフォルトのページマージンを調べ、ボックスモデルをボーダーボックスのサイト全体に設定することもできます。これらのような質問については

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

、あなたがで問題が発生した状況を再現するために必要なものの唯一の裸の骨で、CodePenまたはjsFiddleなどを行います。 http://codepen.io/sheriffderek/pen/e76eb24c23c789accffe6a18fcfdd8c0 - でも、私の例では、必要な...

つ以上の提案よりも多くのスタイルを持っている - あなたは、ボックスを曲げるために新しいしている場合、それは本当にflex-growflex-shrinkflex-basisのような個々のプロパティの代わりに、短い手を書き出すために私を助けました+フレックス方向または他のデフォルトを常に明示的に設定します。

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; 
    } 
}

出典

2017-03-10 16:16:51 sheriffderek

こんにちは、ありがとう！それが問題でした。私は一般的に新しいヨーヨーCSSなので...私はフレックスボックスで遊んでいます。リンクをありがとう、私はそれらを見てみよう –

あなたのポストタイトルをより具体的なものに変更する必要があるかもしれません - "要素がビューポートにあふれ、水平スクロールを引き起こします"。：） – sheriffderek

ビューポートがオーバーフローして水平スクロールが発生する

答えて

関連する問題