我希望display: flex;
的一个孩子将身高调整为其他孩子的身高。如果此子级中的内容大于其他子级中的内容,则应对此内容进行overflow: scroll;
。
换句话说:
我希望下面代码中的中间div(黄色背景)将其高度调整为溢出.tabl
的其他div。
我知道这个问题与其他许多问题一样。我已经阅读了很多线程,但仍然无法解决问题。我为这篇文章表示歉意,但我无力解决。
.parent {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: baseline;
}
.child1 {
background-color: red;
align-self: stretch;
width: 25%;
min-width: 25%;
max-width: 25%;
}
.child2 {
background-color: yellow;
min-height: 0;
min-width: 0;
overflow: auto;
margin: 0 15px;
width: calc(50% - 30px);
max-width: calc(50% - 30px);
display: flex;
flex-direction: column;
flex-shrink: 1;
}
.child3 {
background-color: green;
width: 25%;
min-width: 25%;
max-width: 25%;
}
.child2 .tabl {
flex-shrink: 1;
min-height: 0;
overflow: scroll;
}
<div class="parent">
<div class="child1">
<p>Some element one</p>
<p>Some element two</p>
<p>Some element three</p>
<p>Some element four</p>
</div>
<div class="child2">
<div class="info">
<h2>Element</h2>
</div>
<div class="tabl">
<p>Some element one</p>
<p>Some element two</p>
<p>Some element three</p>
<p>Some element four</p>
<p>Some element one</p>
<p>Some element two</p>
<p>Some element three</p>
<p>Some element four</p>
<p>Some element one</p>
<p>Some element two</p>
<p>Some element three</p>
<p>Some element four</p>
<p>Some element one</p>
<p>Some element two</p>
<p>Some element three</p>
<p>Some element four</p>
</div>
<div class="footer">
<button class="btn">Some button</button>
</div>
</div>
<div class="child3">
<p>Some element one</p>
<p>Some element two</p>
<p>Some element three</p>
<p>Some element four</p>
<p>Some element one</p>
<p>Some element two</p>
<p>Some element three</p>
<p>Some element four</p>
</div>
</div>
答案 0 :(得分:1)
我想要显示的子项之一:flex;调整其他高度。
假设您希望绿色部分(child3
)具有最大高度:
align-items: stretch
(它是默认值,所以请不要覆盖它)-这样可以确保每个 row flex child 都可以拉伸到最大flex flex child。child1
和child2
)的内容包装到绝对定位元素中。请参见下面的演示
.parent {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
/*align-items: baseline;*/
}
.child1 {
background-color: red;
align-self: stretch;
width: 25%;
min-width: 25%;
max-width: 25%;
}
.child2 {
background-color: yellow;
min-height: 0;
min-width: 0;
overflow: auto;
margin: 0 15px;
width: calc(50% - 30px);
max-width: calc(50% - 30px);
display: flex;
flex-direction: column;
flex-shrink: 1;
}
.child3 {
background-color: green;
width: 25%;
min-width: 25%;
max-width: 25%;
}
.child2 .tabl {
flex-shrink: 1;
min-height: 0;
overflow: auto; /* changed to auto */
}
.child1, .child2, .child3 { /* ADDED */
position: relative;
}
.child-wrap { /* ADDED */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
<div class="parent">
<div class="child1">
<div class="child-wrap">
<p>Some element one</p>
<p>Some element two</p>
<p>Some element three</p>
<p>Some element four</p></div>
</div>
<div class="child2">
<div class="child-wrap">
<div class="info">
<h2>Element</h2>
</div>
<div class="tabl">
<p>Some element one</p>
<p>Some element two</p>
<p>Some element three</p>
<p>Some element four</p>
<p>Some element one</p>
<p>Some element two</p>
<p>Some element three</p>
<p>Some element four</p>
<p>Some element one</p>
<p>Some element two</p>
<p>Some element three</p>
<p>Some element four</p>
<p>Some element one</p>
<p>Some element two</p>
<p>Some element three</p>
<p>Some element four</p>
</div>
<div class="footer">
<button class="btn">Some button</button>
</div>
</div>
</div>
<div class="child3">
<p>Some element one</p>
<p>Some element two</p>
<p>Some element three</p>
<p>Some element four</p>
<p>Some element one</p>
<p>Some element two</p>
<p>Some element three</p>
<p>Some element four</p>
</div>
</div>
假设您希望左侧或右侧部分的 具有最大高度-在这种情况下,仅对中间黄色元素使用上述绝对定位 -参见下面的演示,其中左或右元素的最高位置定义了整个parent
包装器的高度:
.parent {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
/*align-items: baseline;*/
}
.child1 {
background-color: red;
align-self: stretch;
width: 25%;
min-width: 25%;
max-width: 25%;
}
.child2 {
background-color: yellow;
min-height: 0;
min-width: 0;
overflow: auto;
margin: 0 15px;
width: calc(50% - 30px);
max-width: calc(50% - 30px);
display: flex;
flex-direction: column;
flex-shrink: 1;
}
.child3 {
background-color: green;
width: 25%;
min-width: 25%;
max-width: 25%;
}
.child2 .tabl {
flex-shrink: 1;
min-height: 0;
overflow: auto; /* changed to auto */
}
.child1, .child2, .child3 { /* ADDED */
position: relative;
}
.child-wrap { /* ADDED */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
<div class="parent">
<div class="child1">
<p>Some element one</p>
<p>Some element two</p>
<p>Some element three</p>
<p>Some element four</p>
<p>Some element two</p>
<p>Some element three</p>
<p>Some element four</p>
</div>
<div class="child2">
<div class="child-wrap">
<div class="info">
<h2>Element</h2>
</div>
<div class="tabl">
<p>Some element one</p>
<p>Some element two</p>
<p>Some element three</p>
<p>Some element four</p>
<p>Some element one</p>
<p>Some element two</p>
<p>Some element three</p>
<p>Some element four</p>
<p>Some element one</p>
<p>Some element two</p>
<p>Some element three</p>
<p>Some element four</p>
<p>Some element one</p>
<p>Some element two</p>
<p>Some element three</p>
<p>Some element four</p>
</div>
<div class="footer">
<button class="btn">Some button</button>
</div>
</div>
</div>
<div class="child3">
<p>Some element one</p>
<p>Some element two</p>
<p>Some element three</p>
</div>
</div>
答案 1 :(得分:0)
溢出意味着没有定义 height ,然后内容应溢出。 flex的问题(在大多数情况下是或优点,)是盒子将增长以匹配“最大”内容,或者说是flex(因此得名)。为此,您可能需要Javascript,或者需要在子级上定义最大高度。
下面是您的代码示例,其中将max-height
应用于孩子;
.parent {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: baseline;
}
.child1 {
background-color: red;
align-self: stretch;
width: 25%;
min-width: 25%;
max-width: 25%;
}
.child2 {
background-color: yellow;
min-height: 0;
min-width: 0;
overflow: auto;
margin: 0 15px;
width: calc(50% - 30px);
max-width: calc(50% - 30px);
display: flex;
flex-direction: column;
flex-shrink: 1;
}
.child3 {
background-color: green;
width: 25%;
min-width: 25%;
max-width: 25%;
}
.child2 .tabl {
flex-shrink: 1;
min-height: 0;
overflow: scroll;
}
.child1, .child2, .child3{
max-height: 250px;
overflow: auto;
}
<div class="parent">
<div class="child1">
<p>Some element one</p>
<p>Some element two</p>
<p>Some element three</p>
<p>Some element four</p>
</div>
<div class="child2">
<div class="info">
<h2>Element</h2>
</div>
<div class="tabl">
<p>Some element one</p>
<p>Some element two</p>
<p>Some element three</p>
<p>Some element four</p>
<p>Some element one</p>
<p>Some element two</p>
<p>Some element three</p>
<p>Some element four</p>
<p>Some element one</p>
<p>Some element two</p>
<p>Some element three</p>
<p>Some element four</p>
<p>Some element one</p>
<p>Some element two</p>
<p>Some element three</p>
<p>Some element four</p>
</div>
<div class="footer">
<button class="btn">Some button</button>
</div>
</div>
<div class="child3">
<p>Some element one</p>
<p>Some element two</p>
<p>Some element three</p>
<p>Some element four</p>
<p>Some element one</p>
<p>Some element two</p>
<p>Some element three</p>
<p>Some element four</p>
</div>
</div>
答案 2 :(得分:0)
如果您事先知道flex子级的期望高度,则使用max-height
属性是Flexbox原生提供的最干净的解决方案,如@Lewis建议。
如果需要更多细粒度的控件,请考虑使用CSS Grid布局模块。如果您将现有代码与下面的代码段交换出去,并将其应用于标记,则可以看到您要实现的布局的极简复制。
.parent {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(4, 100px);
}
.parent > * {
border: 2px solid black; // added for clarity
grid-row-start: 1;
grid-row-end: 4;
}
.child2 {
overflow-y: scroll;
}
答案 3 :(得分:0)
例如,您将.parent设置为高 max-height:150像素;