Overflow: detailed explanation of the usage of Auto

Time:2022-1-14

Before starting the body, I’ll introduce some usage of overflow and flex layouts.
overflow:auto; If the content is trimmed, the browser displays a scroll bar to view the rest of the content.
Properties in Flex
display: flex;
flex-direction: column; The main axis is vertical and the starting point is on the top edge.
Overflow and flex layout are used together

The code is as follows:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    < title > overflow: usage of auto < / Title >
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="css/reset.css" />

    <style type="text/css">
        html,body{
            width: 100%;
            height: 100%;
        }
        .container{
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        .header{
            width: 100%;
            height: 100px;
            background: #f99;
        }
        .content{
            width: 100%;
            height: 100%;
            overflow: auto;
            background: yellow;
            flex: 1;
        }
        .footer{
            width: 100%;
            height: 100px;
            background: #99f;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">

        </div>
        <div class="content">
            <ul>
                <li>111111</li>
                <li>111111</li>
                <li>111111</li>
                <li>111111</li>
                <li>111111</li>
                <li>111111</li>
                <li>111111</li>
                <li>111111</li>
                The Li here should be written more to show the effect. I'm here to save space.
            </ul>
        </div>

        <div class="footer">
        </div>
    </div>
</body>
</html>

To implement overflow: Auto; For this effect, first layout, then style.
In the style, add the following style to the outermost parent box container:


.container{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

In addition, we must give HTML and body 100% width and height;


html,body{
    width: 100%;
    height: 100%;
}

The head and bottom are fixed. Generally, the head and bottom of apps are fixed, like wechat chat records.


.header{
    width: 100%;
    height: 100px;
    background: #f99;
}

.footer{
    width: 100%;
    height: 100px;
    background: #99f;
}

The content in the middle is given flex: 1, and our protagonist overflow: Auto is added; Excess content is automatically cropped.


.content{
    width: 100%;
    height: 100%;
    overflow: auto;
    background: yellow;
    flex: 1;
    }

The renderings are as follows:

这里写图片描述 

The middle content area can slide up and down, and the excess part is automatically cropped.
If it is difficult to implement some functions in the project, you can first click on a small demo, such as the demo above. Some people may say so easy, but how do you implement it when you use react to write the layout of a chat window similar to wechat?
The following is a small project similar to wechat chat window I wrote with react.

这里写图片描述

This is the end of this article about the usage of overflow: Auto. For more information about the usage of overflow: Auto, please search the previous articles of developeppaer or continue to browse the relevant articles below. I hope you will support developeppaer in the future!