Max-width不对Flexbox项起作用（项正缩小到内容的宽度）

Question

我有一个全视区宽度，全视区高度的“英雄形象”在一个主页。我做了一个柔性容器。flex容器中有一个子div（包含一个标题）。此flex项目应与flex容器的底部对齐。它有一个最大宽度，应该在父级内部水平居中。

但是，max-width将被忽略。div取其内容的宽度--标题。请参阅JS Fiddle:https://jsfidle.net/4h7q6d5x/

正如您所看到的，英雄图像内部的.main div采用了其内容的宽度--不像英雄图像下面的.main div。

我已经研究了各种问题，包括这个max-width不适用flex项目

但是将width：100%添加到flex项并不起作用。在较小的视区尺寸下，宽度和填充不能很好地发挥，标题被裁剪掉了右手边。

如何使用FlexBox获得max-width？

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

.main {
    max-width:500px;
    margin:0 auto;
    padding:0 50px;
    background-color:pink;
    }


<div class="hero_image">
    <div class="main">
        <h1>Heading <br>couple of words</h1>
    </div>
</div>  

<div class="main">
    <p>Lots of content</p>
</div>

Answer 1

flex-containers中的默认“宽度”（实际上是flex-basis)是auto，这使得它的宽度与内容的宽度一样大。

但是将width：100%添加到flex项并不起作用。在较小的视区尺寸下，宽度和填充不能很好地发挥，标题被裁剪掉了右手边。

那我建议做几个改动。不要使用flex-column，而是使用align-items:flex-end定位.maindiv。

然后用flex:1设置默认的“width”（实际上是flex-grow）。

null

.hero_image {
  min-height: 50vh;
  /* for example */
  background-color: yellow;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.main {
  flex: 1;
  max-width: 50%;
  /* for example */
  margin: 0 auto;
  padding: 0 50px;
  background-color: pink;
}

html lang-html prettyprint-override"><div class="hero_image">
  <div class="main">
    <h1>Heading <br>couple of words</h1>
  </div>
</div>

<div class="main">
  <p>Lots of text</p>
</div>