Thanks Philippe. I'll dig in to this.
On Mon, Jul 24, 2017 at 7:59 PM Philippe Wittenbergh <e...@l-c-n.com> wrote: > > > 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/ > > > > > > > -- Tom Livingston | Senior Front End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com #663399 ______________________________________________________________________ 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/
