css grid table overflows container

Question

The container class div does not wrap around the

and instead they're overflowing. It's visible where the red background color stops before the end of the page. The layout is a css grid with flex tables. How can I wrap the grid table inside the container?

    body,
    html {
        height: 100%;
        margin: 0;
        font-family: Verdana,
            Arial,
            'Lucida Grande',
            sans-serif;
        font-size: 16px;
    }

    header,
    footer {
        background-color: lightblue;
    }

    main {
        flex: 1;
    }

    footer {
        margin-top: 20px;
    }

    .container {
        display: flex;
        flex-direction: column;
        height: 100%;
        padding: 3px;
        background-color: red;
    }

    .body {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;
    }

    .flex-table {
        display: flex;
        flex-direction: column;
        flex: 1;
        border: 1px solid #ccc;
    }

    .flex-row {
        display: flex;
        flex-direction: row;
    }

    .flex-cell {
        display: flex;
        flex: 1;
        flex-direction: column;
        background-color: lightgrey;
        padding: 6px;
        border-right: 1px solid #ccc;
        word-break: break-word;
    }

    .text-right {
        text-align: right;
    }

    .text-left {
        text-align: left;
    }

    .text-center {
        text-align: center;
    }

    .justify-center {
        justify-content: center;
    }

    .flex-cell:last-child {
        border-right: none;
    }

    .head-flex-container {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .head-flex-row {
        display: flex;
        width: 100%;
        margin-bottom: 10px;
    }

    .head-flex-column {
        flex: 1;
        border: 1px solid black;
        padding: 10px;
    }

    .flex-1 {
        flex: 1;
    }

    .flex-2 {
        flex: 2;
    }

    .flex-3 {
        flex: 3;
    }

    .flex-4 {
        flex: 4;
    }

    .flex-5 {
        flex: 5;
    }

    .flex-6 {
        flex: 6;
    }

    .flex-7 {
        flex: 7;
    }

    /* ------------------------ */

    .grid {
        display: grid;
        grid-template-columns: repeat(10, 1fr);
        border-top: 1px solid gray;
        border-left: 1px solid gray;
    }

    .grid-column-1 {
        grid-column: span 1;
    }

    .grid-column-2 {
        grid-column: span 2;
    }

    .grid-column-3 {
        grid-column: span 3;
    }

    .grid-column-4 {
        grid-column: span 4;
    }

    .grid-column-5 {
        grid-column: span 5;
    }

    .grid-column-10 {
        grid-column: span 10;
    }

    .grid-column {
        border-bottom: 1px solid gray;
        border-right: 1px solid gray;
        padding: 6px;
    }

    /* ------------------------ */

    .ordini .flex-row.row-header {
        border: 1px solid #ccc;
    }

    .ordini .flex-row:last-child {
        flex: 1;
    }


    
        


            
                
                    
                        {% if Logo.LogoPath != '' and Logo.LogoPath != null %}
                        
                        {% else %}
                        
                        {% endif %}
                    
                    
                        Recipient:
                        {{Quote.CrossId}}
                        {{Company.Address}}
                        {{Company.ZipCode}} - {{Company.City}} {{Company.Province}}
                    
                
            

            
                
                    
                        Riferim./Reference: {{Quote.Reference}}
                    
                
            

            
                Customer Sales Order n° {{Quote.Number}} of {{Quote.QuoteDate |
                    format_date, 'dd/MM/yyyy' }}
                Delivery date:&npsp;{{Quote.ShipDate | format_date, 'dd/MM/yyyy'
                    }}
                Page 1/1
                
                    
                        
                            
                                Account:
                            
                            
                                {{Company.CompanyCode}}
                            
                        
                        
                            
                                VAT Number:
                            
                            
                                {{Company.VatId}}
                            
                        
                        
                            
                                Fiscal Code:
                            
                            
                                {{Company.TaxIdentificationNumber}}
                            
                        
                        
                            
                                Port:
                            
                            
                                {{Quote.Porto}}
                            
                        
                        
                            
                                Inv1:
                            
                            
                                -
                            
                        
                        
                            
                                Inv2:
                            
                            
                                -
                            
                        
                    
                
                
                    
                        
                            
                                Categ.:
                            
                            
                                -
                            
                        
                        
                            
                                Place:
                            
                            
                                -
                            
                        
                    
                
                
                    
                        
                            
                                Payment:
                            
                            
                                {{Company.PaymentModeId}}
                            
                            
                                {{Company.PaymentCodes}}
                            
                        
                        
                            
                                Bank:
                            
                            
                                {{Company.BankId}}
                            
                            
                                {{Company.Bank}}
                            
                        
                        
                            
                                Agent:
                            
                            
                                -
                            
                            
                                {{Company.FreeFields[9].Value}}
                            
                        
                        
                            
                                -
                            
                            
                                -
                            
                            
                                {{Company.CurrencyId}}
                            
                        
                        
                            
                                D/i type:
                            
                            
                                -
                            
                            
                                Preventivo
                            
                        
                        
                            
                                S.ord.Inv.:
                            
                            
                                -
                            
                            
                                -
                            
                        

                    
                
            

        
        
            
                
                    
                        Item
                        Description
                        UM
                        Quantity
                        Unity Price
                        Discount
                        VAT
                        Amount
                        Deliv.
                    
                    {% for row in Quote.ErpRows %}
                    
                        {{ row.ProductCode }}
                        {{ row.description }}
                        {{ row.UnitMeasure | empty_cell }}
                        {% if row.FooterDiscount != 0 %} {{ row.Qta | format_decimal, 2 |
                            empty_cell }} {% endif %}
                        {{ var_currency_symbol }} {{ row.UnitPrice | format_decimal, 2 |
                            empty_cell }}
                        {% if row.DiscountFormula != 0 %} {{ row.DiscountFormula |
                            format_decimal, 2 | empty_cell }} {% endif %}
                        {% if row.Tax != 0 %} {{ row.Tax | format_decimal, 0 | empty_cell }} {%
                            endif %}
                        {{ var_currency_symbol }} {{ row.Amount | format_decimal, 2 |
                            empty_cell }}
                        {{Quote.ShipDate | format_date, 'dd/MM/yyyy' }}
                    
                    {% endfor %}
                
            
        
        
            
                
                    Note: {{Quote.Description | empty_cell }}
                
                

                    
                        
                            
                                Delivery by:
                            
                            
                                {{Quote.ShippedBy | empty_cell }}
                            
                            
                                Mittente:
                            
                            
                                -
                            
                        
                        
                            
                                Carrier:
                            
                            
                                {{Quote.Carrier}}
                            
                            
                            
                            
                            
                        
                    
                
                
                    
                        
                            
                                
                                    % Discount:
                                
                                
                                    {% if Quote.FooterDiscount != 0 %} {{ Quote.FooterDiscount | format_decimal, 2 |
                                    empty_cell }} {% endif %}
                                
                            
                            
                                
                                    Transport costs:
                                
                                
                                    {{Quote.CurrencyShip | format_decimal, 2 | empty_cell }}
                                
                            
                            
                                
                                    Total Goods:
                                
                                
                                    {{Quote.SubTotal | format_decimal, 2 | empty_cell }}
                                
                            
                            
                                
                                    Document Total:
                                
                                
                                    {{Quote.GrandTotal | format_decimal, 2 | empty_cell }}

Akshay · Accepted Answer

Add overflow to the container. I have added overflow : scroll;.

body,
    html {
        height: 100%;
        margin: 0;
        font-family: Verdana,
            Arial,
            'Lucida Grande',
            sans-serif;
        font-size: 16px;
    }

    header,
    footer {
        background-color: lightblue;
    }

    main {
        flex: 1;
    }

    footer {
        margin-top: 20px;
    }

    .container {
        display: flex;
        flex-direction: column;
        height: 100%;
        padding: 3px;
        background-color: red;
        overflow: scroll;
    }

    .body {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;
    }

    .flex-table {
        display: flex;
        flex-direction: column;
        flex: 1;
        border: 1px solid #ccc;
    }

    .flex-row {
        display: flex;
        flex-direction: row;
    }

    .flex-cell {
        display: flex;
        flex: 1;
        flex-direction: column;
        background-color: lightgrey;
        padding: 6px;
        border-right: 1px solid #ccc;
        word-break: break-word;
    }

    .text-right {
        text-align: right;
    }

    .text-left {
        text-align: left;
    }

    .text-center {
        text-align: center;
    }

    .justify-center {
        justify-content: center;
    }

    .flex-cell:last-child {
        border-right: none;
    }

    .head-flex-container {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .head-flex-row {
        display: flex;
        width: 100%;
        margin-bottom: 10px;
    }

    .head-flex-column {
        flex: 1;
        border: 1px solid black;
        padding: 10px;
    }

    .flex-1 {
        flex: 1;
    }

    .flex-2 {
        flex: 2;
    }

    .flex-3 {
        flex: 3;
    }

    .flex-4 {
        flex: 4;
    }

    .flex-5 {
        flex: 5;
    }

    .flex-6 {
        flex: 6;
    }

    .flex-7 {
        flex: 7;
    }

    /* ------------------------ */

    .grid {
        display: grid;
        grid-template-columns: repeat(10, 1fr);
        border-top: 1px solid gray;
        border-left: 1px solid gray;
    }

    .grid-column-1 {
        grid-column: span 1;
    }

    .grid-column-2 {
        grid-column: span 2;
    }

    .grid-column-3 {
        grid-column: span 3;
    }

    .grid-column-4 {
        grid-column: span 4;
    }

    .grid-column-5 {
        grid-column: span 5;
    }

    .grid-column-10 {
        grid-column: span 10;
    }

    .grid-column {
        border-bottom: 1px solid gray;
        border-right: 1px solid gray;
        padding: 6px;
    }

    /* ------------------------ */

    .ordini .flex-row.row-header {
        border: 1px solid #ccc;
    }

    .ordini .flex-row:last-child {
        flex: 1;
    }


    
        


            
                
                    
                        Logo
                        
                       
                        
                       
                    
                    
                        Recipient:
                        Verdana
                        Name
                        488888 - USA Newyork
                    
                
            

            
                
                    
                        Riferim./Reference: Refer
                    
                
            

            
                Customer Sales Order n° 11 of 11/11/2011 }
                Delivery date:&npsp;11/11/2011
                    }}
                Page 1/1
                
                    
                        
                            
                                Account:
                            
                            
                                3222444
                            
                        
                        
                            
                                VAT Number:
                            
                            
                                545543
                            
                        
                        
                            
                                Fiscal Code:
                            
                            
                                4545454
                            
                        
                        
                            
                                Port:
                            
                            
                                Tetrr
                            
                        
                        
                            
                                Inv1:
                            
                            
                                -
                            
                        
                        
                            
                                Inv2:
                            
                            
                                -
                            
                        
                    
                
                
                    
                        
                            
                                Categ.:
                            
                            
                                -
                            
                        
                        
                            
                                Place:
                            
                            
                                -
                            
                        
                    
                
                
                    
                        
                            
                                Payment:
                            
                            
                                343434
                            
                            
                                3434
                            
                        
                        
                            
                                Bank:
                            
                            
                                3434
                            
                            
                                Bank of USA
                            
                        
                        
                            
                                Agent:
                            
                            
                                -
                            
                            
                                5455345
                            
                        
                        
                            
                                -
                            
                            
                                -
                            
                            
                                5454
                            
                        
                        
                            
                                D/i type:
                            
                            
                                -
                            
                            
                                Preventivo
                            
                        
                        
                            
                                S.ord.Inv.:
                            
                            
                                -
                            
                            
                                -
                            
                        

                    
                
            

        
        
            
                
                    
                        Item
                        Description
                        UM
                        Quantity
                        Unity Price
                        Discount
                        VAT
                        Amount
                        Deliv.
                    
                   5454
                    
                        54545
                        45454
                        45454
                        345
                        4543 
                        345345
                        34345
                        5345345
                        11/11/11
                    
                
                
            
        
        
            
                
                    Note: rrrrrr
                
                

                    
                        
                            
                                Delivery by:
                            
                            
                                rrrrrr
                            
                            
                                Mittente:
                            
                            
                                -
                            
                        
                        
                            
                                Carrier:
                            
                            
                                rrrr
                            
                            
                            
                            
                            
                        
                    
                
                
                    
                        
                            
                                
                                    % Discount:
                                
                                
                                    rrrrer
                                
                            
                            
                                
                                    Transport costs:
                                
                                
                                    erererer
                                
                            
                            
                                
                                    Total Goods:
                                
                                
                                    44545
                                
                            
                            
                                
                                    Document Total:
                                
                                
                                    4ttrer

css grid table overflows container

Answers (1)

Related Questions