'how to set width 100% always

I wrote html & css like below.

* {
    padding: 0;
    margin : 0;
    box-sizing: border-box;
}

header {
    height: 40px;
    background-color: skyblue;
    margin-right: 0;
    width: 100%;
}

.container{
    display: flex;
}

aside {
    background-color: yellow;
    min-width: 200px;
}

main {
    background-color: green;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
}

.content {
    height: 300px;
    min-width: 500px;
    background-color: red;
}
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/styles.css">
    <title>My test page</title>
</head>
<body>
    <header>
        header
    </header>
    <div class="container">
        <aside>side menu</aside>
        <main>
            <div class="content">
                content
            </div>
        </main>
    </div>
    <script src="js/main.js"></script>
</body>
</html>

then, I resize browser size less than 700px(aside width + content width.) width.

as result, header width is less than contents like below(scroll to the far right). I guess this because of contents has min-width property. Then, I want to manage header width based on contents width. do you know any idea? thanks.

enter image description here

htmlcss


Solution 1:[1]

Not an ideal solution. But if you want to maintain a min-width of 200px for the aside and a min-width of 500px for the content (with 10px padding), you can provide a min-width of 720px (200px+500px+10px+10px) for the header.

* {
    padding: 0;
    margin : 0;
    box-sizing: border-box;
}

header {
    height: 40px;
    background-color: skyblue;
    margin-right: 0;
    width: 100%;
    min-width: 720px;
}

.container{
    display: flex;
}

aside {
    background-color: yellow;
    min-width: 200px;
}

main {
    background-color: green;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
}

.content {
    height: 300px;
    min-width: 500px;
    background-color: red;
}
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/styles.css">
    <title>My test page</title>
</head>
<body>
    <header>
        header
    </header>
    <div class="container">
        <aside>side menu</aside>
        <main>
            <div class="content">
                content
            </div>
        </main>
    </div>
    <script src="js/main.js"></script>
</body>
</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Vaisakh Pradeep

Related Questions