CODEWITHSUNDEEP
htmlcssflexbox
RoetzerBub
RoetzerBub

Reputation: 35

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>

Upvotes: 3

Views: 75

Answers (4)

haltersweb
haltersweb

Reputation: 3139

First off, there are four styles you are using for the flex's children that don't belong to them.

Remove these from the flex children (.gb-left, .gb-center, and .gb-right.):

  • display
  • justify-content
  • align-items
  • flex-direction

Here is a good article on what should be assigned to who: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Now for your problem with the children not shrinking past a certain point -- the text wraps as much as it can and then when the text is as small as it can be it holds the width of the box open.

There is an easy way around this, although it will mean cutting off the text.

Just assign overflow: hidden; to the children.

.gb_left, .gb_center, .gb_right {
    overflow: hidden;
    margin: 2%;
    background-color: yellow;
}

Upvotes: 0

Johannes
Johannes

Reputation: 67738

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/

Upvotes: 2

Steve Clason
Steve Clason

Reputation: 301

To prevent elements from overflowing their containers you need to allow them to shrink as well as grow, for example:

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

can be changed to:

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

using the shorthand to assign flex-grow, flex-shrink, and flex-basis.

Upvotes: 1

codefreaK
codefreaK

Reputation: 3662

@media (max-width:400px) {
  .gamebox {
    flex-direction: column;
  }
}

Which prevents overflow and keeping in touch with responsive design element

Upvotes: 0

Related Questions