flexbox容器寬度縮小時，左側(cè)的內(nèi)容有被隱藏在看不見的區(qū)域了，這是為什么呢

<!DOCTYPE html>
<html>
<head>
    <title>task08</title>
    <link rel="stylesheet" type="text/css" href="style/task8.css">
</head>
<body>

    <div id="root">
    Root
        <div>Best
            <div>Never</div>
            <div>Be</div>
            <div>The</div>
            <div>Same</div>
        </div>
        <div>Favorite
            <div>Havana
                <div>heart</div>
                <div>in</div>
                <div>Havana</div>
            </div>
            <div>oh
                <div>oh</div>
                <div>oh</div>
            </div>
            <div>nana</div>
        </div>
        <div>Twenty
            <div>Camila</div>
            <div>Cabello</div>
        </div>
    </div>
    <div id="buttons" class="a b c">
        <button type="button" id='DFI'>深度優(yōu)先遍歷</button>
        <button type="button" id='WFI'>廣度優(yōu)先遍歷</button>
        <button type="button" id='DFS'>深搜</button>
        <button type="button" id='WFS'>廣搜</button>
        <input type="text" name="input">
        <button type="buttons" id="delete">刪除</button>
        <button type="button" id="add">添加</button>
    </div>

<script type="text/javascript" src="scripts/task8.js"></script>
<script type="text/javascript" src="scripts/task9.js"></script>
</body>
</html>

body{
    margin:0;
    padding: 0;
}
body,div{
    display: flex;
    align-items: center;
    flex-wrap:nowrap;
}
body{
    flex-direction: column;
    align-items: space-around;
}
div{
    border:1px solid black;
    padding: 10px;
    margin:5px;
    flex:1 1 0;
    background: white;
    /*初始寬度是0，flex-grow和flex-shrink是1，則能夠按照內(nèi)容自動伸縮*/
}
#root{
    flex:1 1 300px;
    width:auto;
}
#buttons{
    width:50%;
    justify-content: space-around;
    border: none;
}
div div{
    height: 30%;
}
.highlight{
    background-color: red;
}
.chosen{
    background-color:lightblue;
}
button{
    flex:0 0 auto;
}

就是像圖中這樣，左側(cè)還有很多內(nèi)容但是都看不見了：

圖片描述

回答

編輯回答

柒槿年

一個原因是因為給盒子設(shè)置了margin和padding，定死了已經(jīng)?？s小瀏覽器的時候，這兩個值沒縮小，所以會出現(xiàn)滾動條。超出不顯示是因為你給body設(shè)置了flex-direction: column;把這個刪了就好。至于為啥寫了這個就會出現(xiàn)隱藏，這是一個bug。關(guān)于這個bug，找了一篇文章傳送門。

2017年2月9日 09:50