Flexbox父级适合儿童的文本内容

Question

我想使用flexbox创建一个可以在文本内容变长时滚动的列。 我在主题演讲中画了一张照片，以便做出更好的解释。

when texts are small

when texts get big

这是我当前的代码，我代码中的每个元素都在flexboxes中。 我编辑了我的脚本以包含.app .sidebar

.app {
         display: flex;
         height: 100vh;
         flex-direction: row;
}
.sidebar {
         display:flex;
         flex: 1;
}
.cv {
	display: flex;
        flex:5;
	flex-direction: column;
	margin:20px;
	border: 1px solid lightgrey;
	border-radius: 10px;
	background-color: white;
	overflow: scroll;
}
.header {
	display: flex;
	flex: 0 0 150px;
	justify-content: center;
	align-items: center;
	font-size: 20px;
}
.section {
	display: flex;
	flex-direction: column;
	border: 1px solid lightgrey;
	margin: 10px;
	border-radius: 10px;
}
.sectionHeader{
	display: flex;
	align-items: center;
	font-size: 18px;
	padding-left: 20px;
	padding-top: 15px;
	padding-bottom: 5px;
	flex: 0 0 30px;
	background-color: gray;
	color:white;
	font-weight: 700;
}
.sectionBody{
	display: flex;
	flex: 1;
	padding: 20px;
}

<div class="app">
  <div class="sidebar"></div>
  <div class="cv">
	<div class="header">Header</div>
	<div class="section">
		<div class="sectionHeader">Section Header</div>
		<div class="sectionBody">LONG TEXT</div>
	</div>
	<div class="section">
		<div class="sectionHeader">Section Header</div>
		<div class="sectionBody">LONG TEXT</div>
	</div>
  </div>
</div>

Answer 1

你需要做两件事：

• 给cv一个min-height: 0;（修复i.a. Firefox）

• 将flex-shrink: 0添加到.section，以便在不合身时不会崩溃

Stack snippet

body {
  margin: 0;
}

.app {
  display: flex;
  height: 100vh;
}

.sidebar {
  display: flex;
  flex: 1;
  background: red;
}

.cv {
  display: flex;
  flex: 5;
  flex-direction: column;
  margin: 20px;
  border: 1px solid lightgrey;
  border-radius: 10px;
  background-color: white;
  overflow: scroll;
  min-height: 0;                    /*  added  */
}

.header {
  display: flex;
  flex: 0 0 150px;
  justify-content: center;
  align-items: center;
  font-size: 20px;
}

.section {
  display: flex;
  flex-direction: column;
  border: 1px solid lightgrey;
  margin: 10px;
  border-radius: 10px;
  flex-shrink: 0;                   /*  added  */
}

.sectionHeader {
  display: flex;
  align-items: center;
  font-size: 18px;
  padding-left: 20px;
  padding-top: 15px;
  padding-bottom: 5px;
  flex: 0 0 30px;
  background-color: gray;
  color: white;
  font-weight: 700;
}

.sectionBody {
  display: flex;
  flex: 1;
  padding: 20px;
}

<div class="app">
  <div class="sidebar">sidebar</div>
  <div class="cv">
    <div class="header">Header</div>
    <div class="section">
      <div class="sectionHeader">Section Header</div>
      <div class="sectionBody">LONG TEXT</div>
    </div>
    <div class="section">
      <div class="sectionHeader">Section Header</div>
      <div class="sectionBody">LONG TEXT</div>
    </div>
  </div>
</div>