Menu icon Foundation
flex-child won't wrap

Hello! I'm getting a lot of grief from a flex-parent element to which one of the text children I've media queried to change sizes a lot. Between the medium - small switch however, it will not obey they width of the flex-box, which is meant to inherit it's width from the #content-box-turquoise. screenshots and code are attached. 

CSS

.flex-parent {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.flex-child {
    width: 33%;
}

#content-box-turquoise{
    background-color: #c2e5de;
    padding: 1rem;
    margin-top: 0.8rem;
    margin-bottom: 0.8rem;
    text-transform: lowercase;
}

HTML

            <div class="flex-parent">
                <div class="flex-child"><?php echo the_field('cook_clean_time');?></div>
                <table class="flex-child" style="padding-right: 0.6rem; padding-left: 0.6rem;">
                    <tr>
                        <td style="text-align: right;">Prep</td>
                        <td><i class="fa fa-square" style="color: #fff; margin-left: 0.2rem;" aria-hidden="true"></i></td>
                        <td><body><?php
                    $recipePrepTime = new WPURP_Template_Recipe_Prep_Time();
                    echo $recipePrepTime->output( $recipe );
                    ?></body></td>
                    </tr>
                    <tr>
                        <td style="text-align: right;">Cook</td>
                        <td><i class="fa fa-square" style="color: #f2552c; margin-left: 0.2rem;" aria-hidden="true"></i></td>
                        <td><body><?php
                    $recipeCookTime = new WPURP_Template_Recipe_Cook_Time();
                    echo $recipeCookTime->output( $recipe );
                    ?></body></td>
                    </tr>
                    <tr>
                        <td style="text-align: right;">Clean</td>
                        <td><i class="fa fa-square" style="color: #333; margin-left: 0.2rem;" aria-hidden="true"></i></td>
                        <td><?php
                    $recipePassiveTime = new WPURP_Template_Recipe_Passive_Time();
                    echo $recipePassiveTime->output( $recipe );
                    ?></td>
                    </tr>
                </table>
                <div class="flex-child" style="width: auto;">
                    <h5>£<?php echo the_field('cost');?></h5>
                </div>
            </div>

flex-boxwrapresponsive text

Hello! I'm getting a lot of grief from a flex-parent element to which one of the text children I've media queried to change sizes a lot. Between the medium - small switch however, it will not obey they width of the flex-box, which is meant to inherit it's width from the #content-box-turquoise. screenshots and code are attached. 

CSS

.flex-parent {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.flex-child {
    width: 33%;
}

#content-box-turquoise{
    background-color: #c2e5de;
    padding: 1rem;
    margin-top: 0.8rem;
    margin-bottom: 0.8rem;
    text-transform: lowercase;
}

HTML

            <div class="flex-parent">
                <div class="flex-child"><?php echo the_field('cook_clean_time');?></div>
                <table class="flex-child" style="padding-right: 0.6rem; padding-left: 0.6rem;">
                    <tr>
                        <td style="text-align: right;">Prep</td>
                        <td><i class="fa fa-square" style="color: #fff; margin-left: 0.2rem;" aria-hidden="true"></i></td>
                        <td><body><?php
                    $recipePrepTime = new WPURP_Template_Recipe_Prep_Time();
                    echo $recipePrepTime->output( $recipe );
                    ?></body></td>
                    </tr>
                    <tr>
                        <td style="text-align: right;">Cook</td>
                        <td><i class="fa fa-square" style="color: #f2552c; margin-left: 0.2rem;" aria-hidden="true"></i></td>
                        <td><body><?php
                    $recipeCookTime = new WPURP_Template_Recipe_Cook_Time();
                    echo $recipeCookTime->output( $recipe );
                    ?></body></td>
                    </tr>
                    <tr>
                        <td style="text-align: right;">Clean</td>
                        <td><i class="fa fa-square" style="color: #333; margin-left: 0.2rem;" aria-hidden="true"></i></td>
                        <td><?php
                    $recipePassiveTime = new WPURP_Template_Recipe_Passive_Time();
                    echo $recipePassiveTime->output( $recipe );
                    ?></td>
                    </tr>
                </table>
                <div class="flex-child" style="width: auto;">
                    <h5>£<?php echo the_field('cost');?></h5>
                </div>
            </div>

Rafi Benkual over 2 years ago

 width won't get you what you want. flex: 1 0 0 one the children you want to stack should.

Erin Struble over 2 years ago

Hi Rafi! So that appears to be working on Chrome. But Safari doesn't seem to be picking it up. The first flex child has to be 33% so that the pie charts never increase in size > that 1/3 of the content container. I was more confused about why the flex container isn't respecting the padding of the div it is within.

Here is my new code with your input: 

.flex-parent {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-around;
}

.flex-child {
    flex-basis: 33%;
}

.child-3 {
    flex-basis: auto;
    flex: 0 0 1;
}