css - 段落标签强制父级占据 flexbox 的整个宽度

Question

我正在尝试创建一个非常简单的布局，其中标题、段落和按钮水平和垂直对齐到页面的中心。我想让 .centered-div 占据 .heading 的宽度。

问题是段落标记似乎破坏了整个事情，因为它使 .centered-div 取 .container 的宽度而不是 的宽度>.标题。

如果我删除段落 .centered-div，它的最大宽度就是 .heading 的宽度。

.container {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

.centered-div {
  display: flex;
  margin: auto;
  align-self: center;
  align-items: flex-end;
  flex-direction: column;
}

.heading {
  display: inline-block;
  text-align: right;
}

.description {
  display: inline-block;
  width: 50%;
}

.link-button {
  width: auto;
}

<div class="container">
  <div class="centered-div">
    <h1 class="heading">A Considerably Long Heading</h1>
    <p class="description">
      Lorem ipsum dolor...
    </p>
    <a class="button" href="/">Learn More</a>
  </div>
</div>

灰色是.container，红色轮廓是.centered-div

如果需要更多信息，请告诉我。预先感谢您的帮助。

Answer 1

您可以对文本容器使用 width:0;min-width:100%; 技巧，这将允许它跟随标题的宽度:

.container {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

.centered-div {
  display: flex;
  margin: auto;
  align-self: center;
  align-items: flex-end;
  flex-direction: column;
}

.heading {
  text-align: right;
}

.description {
  width:0;
  min-width:100%;
  text-align:justify;
}

.link-button {
  width: auto;
}

<div class="container">
  <div class="centered-div">
    <h1 class="heading">A Considerably Long Heading</h1>
    <p class="description">
      Lorem ipsum dolor Lorem ipsum dolorLorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor 
    </p>
    <a class="button" href="/">Learn More</a>
  </div>
</div>