> On Jul 24, 2017, at 10:57 PM, Tom Livingston <tom...@gmail.com> wrote:
> 
> I'm still new to grid (and flex, for that matter). I have a sample
> page where an individual flex item squeezes responsively as I want,
> but when it is inside a css grid container, it stops.
> 
> https://tomliv.com/flex-in-grid/
> 
> Why do they not squeeze up inside the grid?

The `display: flex` inside the grid has little or nothing to do with your 
problem.

As an experiment:
.portfoliocard-wrapper > * { border: 2px dotted red; } /* makes the grid-items 
fully visible */
.portfoliocard-wrapper img { width: 200px; }
.portfoliocard { background: yellow; }

Now look at your page, resize your window…

As far as I can see, you put NO constrain on your grid-items. They will grow to 
accommodate their contents (the width of which is ultimately controlled by the 
intrinsic width of the image).
The important thing in this case is this:
https://drafts.csswg.org/css-grid/#min-size-auto

What that says is: The `min-width` of a grid-item is auto (and auto !=0) - 
unless the overflow property on the grid-item is set to something else than 
`visible` (the initial value). That is the same for flex-items, btw.

Some options to fix your layout:

[*] img { width: 100%; /* OR max-width: 100%*/  }
[*] .portfoliocard-wrapper > * { overflow: hidden; } /* but Safari 10 has a bug 
here */
[*] .portfoliocard-wrapper > * { min-width: 0; } /* Safari 10 does not resize 
the image. Firefox 54 does, not sure which one is correct */

My preferred option is the first one.


Philippe
--
Philippe Wittenbergh
https://l-c-n.com/






______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
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 via email to