flexbox容器宽度缩小时，左侧的内容有被隐藏在看不见的区域了，这是为什么呢

Question

flexbox容器宽度缩小时，左侧的内容有被隐藏在看不见的区域了，这是为什么呢

Narcissist

525

发布于
2018-01-14

某熊猫桑

16.1k61547

更新于
2018-01-15

新手上路，请多包涵

<!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'>深度优先遍历</button>
        <button type="button" id='WFI'>广度优先遍历</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，则能够按照内容自动伸缩*/
}
#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;
}

就是像图中这样，左侧还有很多内容但是都看不见了：

图片描述