gpt4 book ai didi

css - 创建一行最大高度由一个 child 定义的 flexbox 元素

转载 作者:技术小花猫 更新时间:2023-10-29 10:54:44 25 4
gpt4 key购买 nike

<分区>

我正在尝试创建一个 flexbox 布局,它可以做一些我认为会更容易的事情,但我找不到正确的方法来做这件事。

我想要一行具有动态高度的元素,允许一个 child 长到需要的高度,但限制另一个元素的高度,以便内容被截断。 p>

An illustration of the desired layout

我想使用 flexbox,因此与此相关的浏览器问题不是问题,但我想避免在解决方案中使用任何 JavaScript。

有什么想法吗?这可能是一个微不足道的问题,但我无法使用我一直使用的搜索词找到任何内容。谢谢!

这是一个 CodePen demo如果您想修改它以用于您的答案。

这是我的引用 flexbox 布局:

.row {
display: flex;
}

.info {
flex: 0 0 200px;
}

.description {
flex: 1 1 auto;
}

<div class="row">
<div class="info">This should grow dynamically</div>
<div class="description">This should be limited in height by the .info div</div>
</div>

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