Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Flex-grow didn't fix column size in flexbox layout #520

Open
1 task done
andycall opened this issue Nov 14, 2023 · 0 comments
Open
1 task done

Flex-grow didn't fix column size in flexbox layout #520

andycall opened this issue Nov 14, 2023 · 0 comments
Labels
bug Something isn't working

Comments

@andycall
Copy link
Member

Affected version

main

No same issues found

  • Yes, I search all issues but not found.

Bug type

CSS/DOM Style

Which frontend framework you are using.

No response

Steps to reproduce

Code example

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta content="portrait" name="screen-orientation" />
    <meta content="portrait" name="x5-orientation" />
    <meta content="webkit" name="renderer" />
    <meta content="max-age=180" http-equiv="Cache-control" />
    <meta name="viewport"
        content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
    <title>请配置页面标题</title>
    <meta name="keywords" content="请配置页面关键词" />
    <meta name="description" content="请配置页面描述" />
</head>

<head>
    <title>Flex Layout Example</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
        }

        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: #333;
            color: #fff;
            padding: 10px 20px;
        }

        .list {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            flex-grow: 1;
            overflow: scroll;
            background-color: #f1f1f1;
            padding: 20px;
        }

        .list-item {
            margin: 10px;
            padding: 10px;
            border: 1px solid #ccc;
            background-color: #fff;
            width: 100%;
            max-width: 500px;
            box-sizing: border-box;
        }

        .footer {
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #333;
            color: #fff;
            padding: 10px 20px;
        }

        .input {
            display: flex;
            flex-grow: 1;
            padding: 10px;
            font-size: 16px;
            border: none;
            border-radius: 0;
            background-color: #f1f1f1;
            box-sizing: border-box;
            outline: none;
        }

        .input:focus {
            background-color: #fff;
        }

        .button {
            background-color: #4CAF50;
            color: #fff;
            padding: 10px;
            font-size: 16px;
            border: none;
            border-radius: 0;
            cursor: pointer;
        }

        .button:hover {
            background-color: #3e8e41;
        }

        .chat {
            display: flex;
            overflow-x: hidden;
            width: 100%;
            height: 100vh;
            flex-direction: column;
        }
    </style>
</head>

<body>
    <div class="chat">
        <div class="header">
            <h1>My Website</h1>
            <a href="#">Logout</a>
        </div>
        <div class="list">
            <div class="list-item">Item 1</div>
            <div class="list-item">Item 2</div>
            <div class="list-item">Item 3</div>
            <div class="list-item">Item 4</div>
            <div class="list-item">Item 5</div>
            <div class="list-item">Item 6</div>
            <div class="list-item">Item 7</div>
            <div class="list-item">Item 8</div>
            <div class="list-item">Item 9</div>
            <div class="list-item">Item 10</div>
            <div class="list-item">Item 11</div>
            <div class="list-item">Item 12</div>
            <div class="list-item">Item 13</div>
            <div class="list-item">Item 14</div>
        </div>
        <div class="footer">
            <input type="text" class="input" placeholder="Enter your message...">
            <button class="button">Send</button>
        </div>
    </div>
</body>

</html>

Expected results

The list-items height should be fixed.

Actual results

The list-items height didn't fixed.
@andycall andycall added the bug Something isn't working label Nov 14, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@andycall