max-width css grid container not taking up 100% of parent container - css

Question

I am trying out css-grid but I am having some trouble with content taking up 100% of parent container. I am absolutely lost. I have a max-width: 1200px on the content in my layouts/index.js file. I then call grid-template-columns: 1fr in the child Component. The child component background-image does not take up 1200px but rather 423px. The image is 2600px wide. I thought 1fr would take up all the space of the max-width content container. What am I missing?
layouts/index.js
const Wrapper = styled.div`
display: grid;
grid-template-rows: auto 1fr auto;
background: red;
height: 100vh;
overflow-y: auto;
`;
const Content = styled.div`
max-width: 1200px;
background: pink;
padding-top: 2rem;
${media.desktop`padding: 2rem ;`}
${media.tablet`padding: 2.4rem;`}
${media.phone`padding: 1.2rem;`}
margin: 0 auto;
`;
const LayoutWrapper = ({ children }) => (
<Wrapper>
<Helmet
title="Fouts Tax Service"
meta={[
{ name: 'description', content: 'A tax service in Anderson, Indiana run by Jerry Fouts' },
{ name: 'keywords', content: 'tax, anderson, 46011, indiana, service, fouts,' },
]}
/>
<ResponsiveHeader/>
<Content>
{children()}
</Content>
<Footer/>
</Wrapper>
);
pages/index.js
import HeroImg from '../images/taxes.jpg'
const Grid = styled.div`
display: grid;
grid-template-columns: 1fr;
border: 2px solid black;
grid-gap: 10px;
align-content: center;
`;
const Showcase = styled.div`
background-image: url(${HeroImg});
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-color: #a7a7a7;
background-blend-mode: color-burn;
grid-gap: 10px;
padding: 4rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: start;
class IndexPage extends Component {
render() {
return (
<Grid>
<Showcase>
<h1>Fouts Tax Service</h1>
<h3>Year round tax service</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing.</p>
</Showcase>
</Grid>
)
}
}
Here is a picture of what I am talking about.

Answer 1

You can also try adding min-width: 0; to grid-items.

Answer 2

I faced the same error while using the following
<grid-element>
<angular-component>
<swiper>
<!-- ... -->
<img src="yourImage.jpg">
<!-- ... -->
</swiper>
</angular-component>
</grid-element>
I tried the answer from #janisKonutis and it worked
grid-element {
display: grid
> * {
min-width: 0; // <-- This did fix the problem
}
}
But I was interested to know why. the nice css-tricks.com propose a bunch of possible fixes
Explanation from Chris Coyier
I can’t promise I’m explaining this 100% accurately, but the way I understand it, the minimum width of a grid column is auto. (The same is true for flex items, by the way.)
And since auto is entirely based on content, we can say it is “indefinitely” sized, its dimensions flex. If we were to put an explicit width on the column, like 50% or 400px, then we would say it is “definitely” sized.
To apply our fix, we need to make sure that there is the column has a definite minimum width instead of auto.