Detailed explanation of overflow:auto usage

Before starting the main text, I will introduce some uses of overflow and flex layout.
overflow: auto; If the content is trimmed, the browser displays a scroll bar so that the remaining content can be viewed.
Properties in flex
display: flex;
flex-direction: column; The main axis is vertical and the starting point is at the top edge.
Using overflow and flex layout together

The code is as follows:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Usage of overflow: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>
                You need to write more li here so that the effect will be displayed. I do this here to save space.
            </ul>
        </div>

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

To achieve the overflow: auto; effect, first layout and then write the style.
In the style, add the following style to the outermost parent box container:

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

Also, be sure to give html and body a width and height of 100%;

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

The header and bottom have fixed heights. The header and bottom of general 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 main character overflow: auto is added; the content beyond that is automatically cropped.

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

The effect diagram is as follows:

這里寫圖片描述

The content area in the middle can be slid up and down, and the excess part is automatically cropped.
No matter how things change, the essence remains the same. If you have difficulty implementing certain functions in your project, you can first make a small demo, such as the demo above. Maybe someone will say it’s so easy, but if you are asked to use react to write a layout for a chat window similar to WeChat, how do you implement it?
The following is a small project I wrote using react that is similar to the WeChat chat window.

這里寫圖片描述

This is the end of this article on the detailed usage of overflow:auto. For more relevant content on the usage of overflow:auto, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope that everyone will support 123WORDPRESS.COM in the future!

<<: Detailed explanation of the installation, configuration, startup and shutdown methods of the Mysql server

>>: Implementing form submission without refreshing the page based on HTML

The difference and usage of distinct and row_number() over() in SQL

Detailed explanation of overflow:auto usage

The difference and usage of distinct and row_number() over() in SQL

Detailed steps to install the NERDTree plugin in Vim on Ubuntu

JavaScript implements the generation of 4-digit random verification code

CSS method of controlling element height from bottom to top and from top to bottom

VMware installation of Centos8 system tutorial diagram (Chinese graphical mode)

How to use the Linux more command in Linux common commands

Detailed description of the life cycle of React components

MySQL 8.0.22 installation and configuration method graphic tutorial under Windows 10

Front-end AI cutting tips (experience)

How to uninstall MySQL cleanly (tested and effective)

Recommend

A simple method to regularly delete expired data records in MySQL

Docker adds a bridge and sets the IP address range

CSS3 changes the browser scroll bar style

Summary of Git commit log modification methods

Detailed explanation of JavaScript axios installation and packaging case

Example of automatic import method of vue3.0 common components

SQL optimization often makes mistakes, that's because you don't understand the usage of MySQL explain plan

Vue implements paging function

Detailed explanation of eight ways to optimize MySQL database (classic must-read)

JavaScript to implement a simple clock

Tutorial on installing Ubuntu 1804 in VMware Workstation 15 Pro (with pictures and text)

MySQL 8.0.11 Community Green Edition Installation Steps Diagram for Windows

Docker network principles and detailed analysis of custom networks

A very detailed explanation of Linux C++ multi-thread synchronization

Detailed explanation of two quick ways to write console.log in vscode