RoetzerBub RoetzerBub - 6 months ago 22
HTML Question

Flexboxs children overflows parents

I have seen a few questions like mine, but none of them seemed to be sucessfully answered. My problem might be simple, but I dont get my mistake.

I use several flexboxes in each other. When i change the browsers size it should resize the same way. But at a point the childrens are overflowing the parent flexbox - Ugly

Because I've not found my mistake, i started a new HTML doc - I still have the mistake.
The "gamebox"s children dont do as I want them to.

Here's a fiddle: Live-Demo

Thank you for your help
- RoetzerBub



html , body, main {
margin: 0;
padding: 0;
min-height: 100%;
min-width: 100%;
}

body{
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
header, footer{
display: flex;
min-width: 100%;
justify-content: center;
}
header{
flex-shrink: 0;
background-color: #cc0000;
color: white;
z-index: 10;
margin-bottom: 10px;
}

main{
display: flex;
justify-content: center;
align-items: center;
}

footer{
background-color: #444444;
color: white;
flex-shrink: 0;
z-index: 10;
margin-top: 10px;
}
/*as*/
.gamebox{
display: flex;
flex-direction: row;
min-width: 30%;
max-width: 45%;
border: 2px solid #b30000;
justify-content: space-between;
align-items: center;
}

.gb_left, .gb_center, .gb_right{
margin: 2%;
justify-content: space-around;
background-color: yellow;
}

.gb_left{
display: flex;
justify-content: space-between;
align-items: center;
flex-grow: 1;
}

.gb_right{
display: flex;
justify-content: space-between;
align-items: center;
flex-grow: 1;

}

.gb_center{
display: flex;
flex-direction: column;
justify-content: space-between;
}

<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="flexstyle.css">
</head>
<body>
<header>HEADER</header>
<main>

<div class="gamebox">
<div class="gb_left">
FLAG
TEAM-A
</div>
<div class="gb_center">
type<br/>
SCORE<br/>
date
</div>
<div class="gb_right">
TEAM-B
FLAG
</div>

</div>

</main>
<footer>FOOTER</footer>
</body>
</html>




Answer

It doesn't really make sense here to define the children as flex containers again - there are no elements in them (divs or spans), only text (i.e. nothing that could function as a flex item).

In the following fiddle I removed all this and used the following CSS settings:

 .gamebox{
    display: flex;
    flex-direction: row;
    min-width: 30%;
    max-width: 45%;
    border: 2px solid #b30000;
    justify-content: space-between;
    align-items: center;
}

.gb_left, .gb_center, .gb_right{
    margin: 2%;
    background-color: yellow;
    min-width: 29%;
    word-wrap: break-word;
}

The very last one makes sure that when a word is longer than the width of its container, it's broken.

Here is the fork of your fiddle: https://jsfiddle.net/o6wxy5z7/

Comments