Issue
Say I have a flexbox with 3 elements:
First child has 4-7 lines. Second child has 40-50 lines. Third child has 2-5 lines.
I want to set the second child's height to match the same as the first child.
I know I can set the height: 300px
or some static value, but the content might be shorter or longer.
Here's an example (I want the second child [green box] to be the same height of the first child [purple box]:
I've tried several ways unsuccessfully (like flex-shrink). Here's part of the code:
I have considered using js to get the height of the first child and applying it to the parent, but is there a way to do this via css only?
.parent {
background-color: red;
display: flex;
flex-direction: row;
gap: 1rem;
}
.child {
width: 33.3333333%;
font-size: 2rem;
// height: 300px; // this works but then the height would not match the first child's
}
.child1 {
display: flex;
background: purple;
}
.child2 {
background: green;
overflow: scroll;
}
.child3 {
background: grey;
}
<div class="parent">
<div class="child1 child">
This div has dynamic amount of lines... <br>line 1 <br> line 2 <br/>line 3 <br> line 4 <br> line 5<br/>
</div>
<div class="child2 child">
This div has a lot of lines... <br>line 1 <br> line 2 <br/>line 3 <br> line 4 <br> line 5<br/> line 6 <br> line 7 <br/>line 8 <br> line 9 <br> line ...<br/>
</div>
<div class="child3 child">
some other div <br> 1 <br>2 <br/> 3 <br> 4
</div>
</div>
Solution
If you're okay with modifying your HTML structure a little bit, here's a solution with relatively little changes:
- Wrap the contents of
child2
andchild3
in another div, let's saywrapper
.
<div class="child2 child">
<div class="wrapper">
This div has a lot of lines... <br>line 1 <br> line 2 <br/>line 3 <br> line 4 <br> line 5<br/> line 6 <br> line 7 <br/>line 8 <br> line 9 <br> line ...<br/>
</div>
</div>
<div class="child3 child">
<div class="wrapper">
some other div <br> 1 <br>2 <br/> 3 <br> 4
</div>
</div>
- Make
wrapper
position: absolute
, so the heights are only determined by children that doesn't have awrapper
, which ischild1
. And then make themscroll: auto
.
.child {
width: 33.3333333%;
font-size: 2rem;
position: relative;
}
.wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
max-height: 100%;
overflow: auto;
}
Here's the full solution:
.parent {
background-color: red;
display: flex;
flex-direction: row;
gap: 1rem;
}
.child {
width: 33.3333333%;
font-size: 2rem;
position: relative;
}
.wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
max-height: 100%;
overflow: auto;
}
.child1 {
display: flex;
background: purple;
}
.child2 {
background: green;
min-height: 0;
position: relative;
}
.child3 {
background: grey;
}
<div class="parent">
<div class="child1 child">
This div has dynamic amount of lines... <br>line 1 <br> line 2 <br/>line 3 <br> line 4 <br> line 5<br/>
</div>
<div class="child2 child">
<div class="wrapper">
This div has a lot of lines... <br>line 1 <br> line 2 <br/>line 3 <br> line 4 <br> line 5<br/> line 6 <br> line 7 <br/>line 8 <br> line 9 <br> line ...<br/>
</div>
</div>
<div class="child3 child">
<div class="wrapper">
some other div <br> 1 <br>2 <br/> 3 <br> 4
</div>
</div>
</div>
Answered By - Hao Wu
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.