Paragraph within flex-item overflowing

Asked

Viewed 33 times

-1

I’m doing a flex layout and in the paragraph inside the article, the text is not getting inside the card but is overflowing. What’s wrong with my code?

HTML:

<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <title></title>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        
            <header>
                
                <nav>
                    <ul>
                        <li><a>HOME</a></li>
                        <li><a>CONTACT</a></li>
                        <li><a>ABOUT US</a></li>
                        
                    </ul>
                </nav>
            </header>
            <main class="content">
                <article class="mainText item">
                    <p>articlearticlearticlearticlearticlearticlearticlearticlearticlearticlearticlearticlearticlearticlearticlearticlearticlearticlearticlearticlearticlearticlearticlearticlearticlearticlearticlearticlearticlearticlearticlearticlearticlearticlearticlearticlearticlearticlearticlearticlearticlearticlearticlearticlearticlearticlearticlearticlearticlearticlearticlearticlearticlearticlearticlearticlearticlearticlearticlearticlearticlearticlearticlearticlearticlearticlearticlearticlearticlearticlearticlearticlearticlearticlearticlearticlearticlearticlearticlearticle</p>
                </article> 
                <aside class="aside1 item">
                <p>aside1</p></aside>
                
                <aside class="aside2 item"><p></p></aside>
            
            
            </main>
            <footer></footer>

    </body>
</html>

CSS:

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

body {
    font-family: system-ui;
    background-color: #000;
}
ul, article, aside , footer {
    background-color: #88FA97;
    
}


nav {
    border-top: #fff 10px solid; 
    margin-bottom: 20px;
    
}

ul {
    display: flex;
    justify-content: space-around;
    list-style-type: none;
    margin-top: 0;
    color: #000;
    
}

li {
  
    flex: 0 1 100%;
    
}

a {
    display: inline-block;
    padding: 10px 40px;
    width: 100%;
    border-right: 1px #000 solid; 
    text-align: center;
      
}

a:hover {
    color: #333;
    background-color: #A6FAC3;
    cursor: pointer;
}

.content {
    display: flex;
    border: 1px white solid;
    justify-content: stretch;
    
}

.mainText {
    order: 1;
    margin-right: 15px;
    flex: 2 200px;
    
}

.aside1 {
    order: 0;
    margin-right: 15px;
    flex: 1 100px;
}

.aside2 {
    order: 2;
    flex: 1 100px;
}
.mainText p {
    margin-bottom: 10px;
}

p{
    padding: 10px 25px;
}

.item {
  
}
html css flexbox

  • What would be the element card? And what do you mean overflowing...

1 answer

0

Browser other questions tagged html css flexbox

You are not signed in. Login or sign up in order to post.