css - 如何使用 CSS flex 从父 DIV 到子 DIV 获得 100% 高度

Question

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

拜托，我需要在没有 CSS“position”和“border”属性的情况下实现这一点。我正在使用 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 类中删除 height: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>