> On Jul 24, 2017, at 10:57 PM, Tom Livingston <[email protected]> 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 [[email protected]]
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/
