> 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/