gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 09:23:14 25 4
gpt4 key购买 nike

在示例代码块中,有一个 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>

最佳答案

从 .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>

关于css - 如何使用 CSS flex 从父 DIV 到子 DIV 获得 100% 高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50735415/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com