最大宽度不适用于 Flexbox 项目（项目正在缩小到内容的宽度）

Question

我在主页上有一个完整的视口宽度、完整的视口高度“英雄形象”。我已经把它做成了一个 Flex 容器。 flex 容器内部是一个子 div（包含一个标题）。这个弹性项目应该与弹性容器的底部对齐。它有一个最大宽度，并且应该在父级内部水平居中。

但是，最大宽度被忽略了。 div 正在获取其内容的宽度 - 标题。请看 JS Fiddle：https://jsfiddle.net/4h7q6d5x/

如您所见，主图内部的 .main div 占用了其内容的宽度 - 与主图下方的 .main div 不同。

我查看了各种问题，包括这个max-width not working on flex item

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

如何获得 max-width 以使用 Flexbox？

.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 定位您的 .main div。

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

.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;
}

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