スキップしてメイン コンテンツに移動

[CSS] Can't scroll to top by align-items:center of flexbox

Intro

I showed some elements center with flexbox. And I wanted to make scrollable when a text what was in an element was long.

Environments

  • PostCSS ver.7.0.32
  • Autoprefixer ver.9.8.0

Samples

package.json


{
    "scripts": {
        "css": "npx postcss src/pcss/*.css -c postcss.config.js -d dist/css -w"
    },
    "browserslist": [
        "last 2 versions"
    ],
    "dependencies": {
        "autoprefixer": "^9.8.0",
        "postcss": "^7.0.32",
        "postcss-cli": "^7.1.1",
        "postcss-import": "^12.0.1",
        "precss": "^4.0.0"
    }
}

postcss.config.js


module.exports = {
    plugins: [
        require('autoprefixer')({
            "grid": true,
        }),
        require('precss')
    ]
}

main.html


<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Hello</title>
        <meta charset="utf-8"/>
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
        <div id="outside">
            <div class="cell">
                ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyz0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789
            </div>
            <div class="cell">
                ABC
            </div>
        </div>
    </body>
</html>

style.css


#outside {
    border: solid 1px #000;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    height: 20vh;
    width: 20vw;
}
.cell {
    border: solid 1px #000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 40%;
    /* IE, Firefox (Chrome) */
    word-break: break-all;
    overflow-x: hidden;
    overflow-y: auto;
}

Problem

I couldn't scroll to top.


Although some suggested "margin: auto", "align-items: safe center", and so on, the problem wasn't resolved. When I could scroll to top on left side item, I couldn't center the right side item.

Resolve

I divided the elements into center items and scroll texts.

main.html


<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Hello</title>
        <meta charset="utf-8"/>
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
        <div id="outside">
            <div class="cell">
                <div class="cell_text">
                    ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyz0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789
                </div>
            </div>
            <div class="cell">
                <div class="cell_text">
                    ABC
                </div>
            </div>
        </div>
    </body>
</html>

style.css


...
.cell {
    border: solid 1px #000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 40%;
}
.cell_text {
    display: inline-block;
    height: auto;
    max-width: 100%;
    /* IE, Firefox (Chrome) */
    word-break: break-all;
    overflow-y: auto;
    overflow-x: hidden;
}
Now I could scroll to top.
ラベル:

コメント

コメントを投稿

このブログの人気の投稿

[Angular][ASP.NET Core] Upload chunked files

Intro I wanted to send files to Web application (made by ASP.NET Core). If the file size had been small, I didn't need do any special things. But when I tried to send a large file, the error was occurred by ASP.NET Core's limitation. Though I could change the settings, but I didn't want to do that, because I hadn't known the file sizes what would been actually using. So I splitted the data into chunks first, and sent them. After receiving all chunks, I merged them into one file. There might be some libraries or APIs (ex. Stream API) what did them automatically, but I couldn't find them. What I did [ASP.NET Core] Make CORS enabled [Angular] Split a large file into chunks [Angular][ASP.NET Core] Send and receive data as form data [ASP.NET Core] Merge chunks into one file [ASP.NET Core] Make CORS enabled Because the client side application(Angular) and the server side application(ASP.NET Core) had been separated, I had to make CORS(Cross-Origin Requests) ...
コメントを投稿
続きを読む

[PostgreSQL] Play with TypeORM 1

Intro This time, I tried accessing Database by TypeORM. Because I wanted to manage Database tables by ORM, I created a table first.  GitHub - typeorm/typeorm   TypeORM - Amazing ORM for TypeScript and JavaScript (ES7, ES6, ES5). Installation and creating a project Installation TypeORM needed "reflect-metadata" and database driver. npm install --save typeorm reflect-metadata pg typescript tsc npm install --save-dev @types/node And I also installed "ts-node" to skip compiling. npm install --save ts-node Preparing References I could generate a TypeORM project by TypeORM command. npx typeorm init --name gen-typeorm-sample --database postgres I refered Most of all settings from it. Adding files and folders First, I added tsconfig.json. npx tsc --init And I edited like below. tsconfig.json { "compilerOptions": { /* Basic Options */ "incremental": true, "target": "es5", "module": "comm...
コメントを投稿
続きを読む

[Ubuntu] Install Docker, PostgreSQL(From DockerHub), PgAdmin4 + SELECT ALL

Intro I build development of PostgreSQL environment on Ubuntu this time. Because I haven't wanted to install PostgreSQL directly, I use Docker to install it. After installing them, I will try some SQL. Build development environments Docker According to the documents, I add repository and install "docker-ce", "docker-ce-cli", "containerd.io" Get Docker Engine - Community for Ubuntu | Docker Documentation When I had installed "Docker for Windows" on Windows, it had the GUI application. But maybe there is no GUI application for Ubuntu or I need installing another package? PostgreSQL(Docker Hub) Because I have wanted to use latest version, I just do "docker pull postgres". postgres - Docker Hub After getting PostgreSQL, I made mistake when I did "docker run". docker run (failed) docker run --name sample-shop -e POSTGRES_PASSWORD=postgres -d postgres -p 5432:5432 There are no any errors, but I can't access to...
コメントを投稿
続きを読む