Question

我正在尝试max-width: 1200px，但我在内容占用100％父容器方面遇到了一些麻烦。我完全迷失了。我的layouts/index.js文件中的内容有grid-template-columns: 1fr。然后我在子Component中调用background-image。子组件1200px不会占用423px，而是1fr。图像宽2600像素。我以为layouts/index.js会占用max-width内容容器的所有空间。我错过了什么？

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

var request = require('request');
const obj = require('./bugs.json');

obj.forEach(element => {
    // Set the headers
  var headers = {
    'Content-Type': "stuff",
    'x-authorization': "stuff"
  }

  // Configure the request
  var options = {
      url: 'http://localhost:8080/bugreport/import',
      method: 'POST',
      headers: headers,
      form: {
          'subject': element.subject,
          'description': element.description,
          'platform': element.platform,
          'date': element.date,
          'author': element.author,
          'isSolved': element.isSolved,
          'createdAt': element.createdAt,
          'updatedAt': element.updatedAt,
          'id': element.id
      }  
  }
//
  // Start the request
  request(options, function(error, response, body){
      if (!error && response.statusCode == 200) {
          console.log("No error detected.");
          console.log(body)
      }
      else {
          console.log("Error: " + error);
      }
  })

});

这是我正在谈论的图片。

Answer 1

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

Answer 2

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

<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，那么我们会说它是“绝对”大小的。

<块引用>

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

max-width css网格容器不占用父容器的100％

2 个答案:

来自Chris Coyier的解释