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

[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.
ラベル:

コメント

コメントを投稿

このブログの人気の投稿

[Nest.js] Show static files

Intro I wanted to use Nest.js and WebRTC(node-webrtc). NestJS - A progressive Node.js framework Documentation | NestJS - A progressive Node.js framework And because I wanted to try with simple page(not use JavaScript frameworks), I added static HTML, CSS, JavaScript into a Nest.js project. Prepare Install First, I installed @nestjs/cli. First steps | NestJS - A progressive Node.js framework As same as last time , I couldn't do global install because I had used Volta. But I could installed by volta. volta install @nestjs/cli Create project nest new nest-web-rtc-sample volta pin node@12 Run npm start After doing "npm start", I could getting "Hello World!" from http://localhost:3000. Add static files I could add static files by two ways. @nestjs/serve-static First one of them was using "serve-static". Serve Static | NestJS - A progressive Node.js framework npm install --save @nestjs/serve-static And I needed adding a module into app.modu...
コメントを投稿
続きを読む

[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) ...
コメントを投稿
続きを読む

[Nest.js] Use WebSocket with ws

Intro Until last time , I had used node-web-rtc to try WebRTC. But because the example was a little complicated for I understood the core functions of using WebRTC. So I look for other frameworks or libraries. PeerJS is a famous library for WebRTC. peers/peerjs: Peer-to-peer data in the browser. - GitHub peers/peerjs-server: Server for PeerJS - GitHub PeerJS - Simple peer-to-peer with WebRTC A problem is I don't know how to integrate to the Nest.js project. I couldn't find examples. So I don't choose at least this time. What shall I choose? According MDN, WebRTC doesn't specify strictly what technology is used on server application for connecting two devices. Signaling and video calling - Web APIs | MDN But in many examples include MDN's one use WebSocket. samples-server/s/webrtc-from-chat at master · mdn/samples-server · GitHub So I try WebSocket in the Nest.js project. Use WebSocket in a Nest.js project Nest.js has a function for using We...
コメントを投稿
続きを読む