如何使用CSS flex从父DIV到子DIV获得100％的高度

Question

在示例代码块中，有一个DIV名称“left-line”（红色线）。我需要根据“内容”DIV的高度来拉伸DIV的高度。

我需要实现这一点，没有CSS“位置”和“边框”属性。我正在使用CSS flex。

.parent {
  display: -webkit-flex;
  /* Safari */
  display: flex;
  box-sizing: border-box;
  background-color: orange;
}

.left-line {
  width: 10px;
  height: 100%;
  background-color: red;
}

.content {
  flex: 1;
  padding: 0 0 0 14px;
  letter-spacing: 1px;
  line-height: 18px;
}

<div class="parent">
  <div class="left-line">s</div>
  <div class="content">
    <p>Lorem Ipsum is simply dummy text</p>
    <p>Lorem Ipsum is simply dummy text of the printing...</p>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
  </div>
</div>

Answer 1

从.left-line class

中删除高度：100％

.parent {
  display: -webkit-flex;
  /* Safari */
  display: flex;
  box-sizing: border-box;
  background-color: orange;
}

.left-line {
  width: 10px;
  background-color: red;
}

.content {
  flex: 1;
  padding: 0 0 0 14px;
  letter-spacing: 1px;
  line-height: 18px;
}

<div class="parent">
  <div class="left-line">s</div>
  <div class="content">
    <p>Lorem Ipsum is simply dummy text</p>
    <p>Lorem Ipsum is simply dummy text of the printing...</p>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
  </div>
</div>