Getting parent element to increase height when child element flex wraps

classic Classic list List threaded Threaded
3 messages Options
Reply | Threaded
Open this post in threaded view
|

Getting parent element to increase height when child element flex wraps

Tim Dawson
Hello,

I'm having a problem with a footer which will not automatically increase in height when a row within
it is wrapped using 'flex'.
There's an example at: http://new.gigaplusargyll.co.uk

The footer contains a row of content (three divs), under which there is a div of logos (images). I
have set the logo div to 'flex-wrap: wrap;' so that when the screen width is reduced the logo images
form a second (or even third or fourth) row.

That part works as intended, but I cannot get the size of the footer (dark background) to expand.
I've set 'overflow: visible' so the additional rows can be seen falling out of the footer.

[NOTE about my method]
The three content divs and the logo div are themselves flex children of the footer and the sizing of
the content divs is set (33.33%) so the logo div HAS to wrap under the content. It's like that
because I have an alternative layout where the logos form a fourth horizontal div with the logos
themselves in a column (achieved by reducing the width of the content divs).

Googling around has shown there are (or have been) problems getting element WIDTH to increase with
flex in column mode, but I've not seen the same for rows, which is what I have here.

I'm aware that there are other issues in the body of the page when the screen width is reduced, but
it's the footer that concerns me here. Any suggestions, please?

Regards,

Tim Dawson

--
Tim Dawson
Maolbhuidhe
Fionnphort
Isle of Mull  PA66 6BP

01681 700718
______________________________________________________________________
css-discuss [[hidden email]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Reply | Threaded
Open this post in threaded view
|

Re: Getting parent element to increase height when child element flex wraps

Sara Haradhvala
Try putting the height on the img tag rather than the div .logos

> On Feb 24, 2017, at 11:44 AM, Tim Dawson <[hidden email]> wrote:
>
> Hello,
>
> I'm having a problem with a footer which will not automatically increase in height when a row within it is wrapped using 'flex'.
> There's an example at: http://new.gigaplusargyll.co.uk
>
> The footer contains a row of content (three divs), under which there is a div of logos (images). I have set the logo div to 'flex-wrap: wrap;' so that when the screen width is reduced the logo images form a second (or even third or fourth) row.
>
> That part works as intended, but I cannot get the size of the footer (dark background) to expand. I've set 'overflow: visible' so the additional rows can be seen falling out of the footer.
>
> [NOTE about my method]
> The three content divs and the logo div are themselves flex children of the footer and the sizing of the content divs is set (33.33%) so the logo div HAS to wrap under the content. It's like that because I have an alternative layout where the logos form a fourth horizontal div with the logos themselves in a column (achieved by reducing the width of the content divs).
>
> Googling around has shown there are (or have been) problems getting element WIDTH to increase with flex in column mode, but I've not seen the same for rows, which is what I have here.
>
> I'm aware that there are other issues in the body of the page when the screen width is reduced, but it's the footer that concerns me here. Any suggestions, please?
>
> Regards,
>
> Tim Dawson
>
> --
> Tim Dawson
> Maolbhuidhe
> Fionnphort
> Isle of Mull  PA66 6BP
>
> 01681 700718
> ______________________________________________________________________
> css-discuss [[hidden email]]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

______________________________________________________________________
css-discuss [[hidden email]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Reply | Threaded
Open this post in threaded view
|

Re: Getting parent element to increase height when child element flex wraps

Tim Dawson
Thank you, that works, though I'm not yet sure why!
In my original version the red outline of the div .logo DID expand, but not the footer.
With your amendment they BOTH expand. Great. Many thanks

Regards,

Tim Dawson

On 24/02/2017 17:05, Sara Haradhvala wrote:

> Try putting the height on the img tag rather than the div .logos
>
>> On Feb 24, 2017, at 11:44 AM, Tim Dawson <[hidden email]> wrote:
>>
>> Hello,
>>
>> I'm having a problem with a footer which will not automatically increase in height when a row within it is wrapped using 'flex'.
>> There's an example at: http://new.gigaplusargyll.co.uk
>>
>> The footer contains a row of content (three divs), under which there is a div of logos (images). I have set the logo div to 'flex-wrap: wrap;' so that when the screen width is reduced the logo images form a second (or even third or fourth) row.
>>
>> That part works as intended, but I cannot get the size of the footer (dark background) to expand. I've set 'overflow: visible' so the additional rows can be seen falling out of the footer.
>>
>> [NOTE about my method]
>> The three content divs and the logo div are themselves flex children of the footer and the sizing of the content divs is set (33.33%) so the logo div HAS to wrap under the content. It's like that because I have an alternative layout where the logos form a fourth horizontal div with the logos themselves in a column (achieved by reducing the width of the content divs).
>>
>> Googling around has shown there are (or have been) problems getting element WIDTH to increase with flex in column mode, but I've not seen the same for rows, which is what I have here.
>>
>> I'm aware that there are other issues in the body of the page when the screen width is reduced, but it's the footer that concerns me here. Any suggestions, please?
>>
>> Regards,
>>
>> Tim Dawson
>>
>> --
>> Tim Dawson
>> Maolbhuidhe
>> Fionnphort
>> Isle of Mull  PA66 6BP
>>
>> 01681 700718
>> ______________________________________________________________________
>> css-discuss [[hidden email]]
>> http://www.css-discuss.org/mailman/listinfo/css-d
>> List wiki/FAQ -- http://css-discuss.incutio.com/
>> List policies -- http://css-discuss.org/policies.html
>> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
>
>

--
Tim Dawson
Maolbhuidhe
Fionnphort
Isle of Mull  PA66 6BP

01681 700718
______________________________________________________________________
css-discuss [[hidden email]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/