最大宽度不适用于弹性商品 [英] max-width not working on flex item

问题描述

我在一个列中有一个flex容器和两个flex子代.最上面的div应该填充所有剩余的空间.底部div的高度应由内容和max-width决定.但是底部div的宽度正在缩小到其内容的宽度. max-width被忽略.

I have a flex container and two flex children in a column. The top div should fill all remaining space. The bottom div should have a height determined by the content and a max-width. But the bottom div's width is shrinking to the width of its content. The max-width is being ignored.

.hero_image {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: yellow;
}

.impact_image {
  flex-grow: 1;
  background-image: url(https://s16.postimg.org/cjw1kzkkl/circles.png);
  background-position: center bottom;
  background-size: cover;
}

.intro {
  max-width: 600px;
  flex-shrink: 0;
  margin: 0 auto;
  background-color: pink;
}

h1 {
  font-size: 20px;
}

<div class="hero_image">
  <div class="impact_image"></div>
  <div class="intro">
    <h1>XYZ brand consultancy<br>making a difference</h1>
  </div>
</div>

这是JS小提琴: https://jsfiddle.net/cke6qr8e/

推荐答案

在这种情况下，除了 Michael_B的答案是margin: 0 auto导致.intro折叠，因此，如果删除它，它的宽度不会折叠到其内容，但这也会使它的居中效果不佳.

In addition to Michael_B's answer, in this case it is the margin: 0 auto that cause the .intro to collapse, so if you remove it, its width will not collapse to its content, but that will also make the centering of it to not work as well.

另一种解决方案是删除intro规则，并将其属性移至h1(除flex-shrink: 0之外的所有属性).

Another solution would be to delete the intro rule and move its properties to the h1 instead (all but flex-shrink: 0).

html, body { margin: 0; }

.hero_image {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: yellow;
}

.impact_image {
  flex-grow: 1;
  background-image: url(https://s16.postimg.org/cjw1kzkkl/circles.png);
  background-position: center bottom;
  background-size: cover;
}

.intro h1 {
  max-width: 600px;
  margin: 0 auto;
  font-size: 20px;
  background-color: pink;
}

<div class="hero_image">
  <div class="impact_image"></div>
  <div class="intro">
    <h1>XYZ brand consultancy<br>making a difference</h1>
  </div>
</div>

这篇关于最大宽度不适用于弹性商品的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！