html - 如何让 child 不扩展 flex 容器 parent 的宽度？

Question

我在容器上使用 display:flex 并有一个子标题定义它的宽度。我想要它下面的一些段落文本，但我不希望该段落拉伸(stretch) flex 容器的宽度。我怎样才能做到这一点？

.main {
	display:flex;
	position:relative;
	width:100%;
}

.left {
	position:relative;
	width:100%;
}

.right {
	flex:0 0 auto;
	position:relative;
}

<div class='main'>
  <div class='left'>
    <h1>SOME TITLE</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla commodo pretium dolor, non vestibulum erat ullamcorper a. Cras ac bibendum nibh. Sed eget lectus quis lorem tempus pulvinar.</p>
  </div>
  <div class='right'>
    <h1>ANOTHER TITLE</h1>
    <p>This paragraph should break into lines and expand vertically instead of stretching the parent div horizontally.</p>
  </div>
</div>

Answer 1

将夸张的 flex-shrink 值 100 放在 .right 上，并将 white-space:nowrap 放在标题上就可以了。感谢Michael_B .

.main {
	display:flex;
	position:relative;
	width:100%;
}

.left {
	position:relative;
	width:100%;
}

.right {
	flex:0 100 auto;
	position:relative;
}

.right h1 {
  white-space:nowrap;
}

<div class='main'>
  <div class='left'>
    <h1>SOME TITLE</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla commodo pretium dolor, non vestibulum erat ullamcorper a. Cras ac bibendum nibh. Sed eget lectus quis lorem tempus pulvinar.</p>
  </div>
  <div class='right'>
    <h1>ANOTHER TITLE</h1>
    <p>This paragraph should break lines and expand vertically instead of stretching the parent div horizontally.</p>
  </div>
</div>