元素滿溢視口，導致水平滾動

我試圖做使用Flexbox的靜態HTML CSS &網頁，但我的conten不適合在Chrome瀏覽器窗口。我可以水平滾動，因此我的瀏覽器窗口大小的水平空間更大。元素滿溢視口，導致水平滾動

這是顯示問題的截圖。包裝兩邊的邊距相同，但內容不適合瀏覽器窗口的100％寬度，所以我可以水平滾動，這不是我想要的。

我試過在Safari相同的代碼和完美的作品。這是Chrome上的flexbox問題還是我錯過了什麼？謝謝。

這是我的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，所以......我只是玩弄flexbox。感謝您的鏈接，我會看看他們 –

也許你應該改變你的帖子標題爲更具體的東西 - 「元素溢出視口，並導致水平滾動」或什麼的。：） – sheriffderek

元素滿溢視口，導致水平滾動

回答

相關問題