最大宽度 css 网格容器不占用父容器的 100%

Question

我正在尝试css-grid，但我在内容占用 100% 父容器时遇到了一些问题。我完全迷路了。我的layouts/index.js 文件中的内容有一个max-width: 1200px。然后我在子组件中调用grid-template-columns: 1fr。子组件background-image 不占用1200px，而是占用423px。图像宽 2600 像素。我认为1fr 会占用最大宽度内容容器的所有空间。我错过了什么？

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

  }
}

这是我正在谈论的图片。

Answer 1

我在使用以下内容时遇到了同样的错误

<grid-element>
  <angular-component>
   <swiper>
    <!-- ... -->
      <img src="yourImage.jpg">
    <!-- ... -->
   </swiper>
  </angular-component>
</grid-element>

我尝试了@janisKonutis 的答案，它奏效了

grid-element { 
  display: grid
  > * {
    min-width: 0; // <-- This did fix the problem
  }
}

但我很想知道为什么。不错的 css-tricks.com 建议 a bunch of possible fixes

来自Chris Coyier的解释

我不能保证我会 100% 准确地解释这一点，但根据我的理解，网格列的最小宽度是自动的。 （顺便说一下，flex 项目也是如此。）

由于 auto 完全基于内容，我们可以说它是“无限”大小的，它的尺寸是可变的。如果我们要在列上设置一个明确的宽度，例如 50% 或 400px，那么我们会说它是“绝对”大小的。

要应用我们的修复，我们需要确保列具有明确的最小宽度而不是自动。

Answer 2

您也可以尝试添加 min-width: 0;到网格项目。