如何让孩子不扩展flex容器父级的宽度？

Question

我正在使用display：flex on a container并让子标题定义它的宽度。我想在它下面有一些段落文本，但我不希望该段落伸展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

在.right和white-space上加上一个夸张的flex-shrink值100：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>