英文:
How can I make all my grid column have their height be equal to the height of shortest column
问题
你可以看到在我的代码片段中，两列都被设置成最高列的高度。然而，我想要我的列的高度被设置成最短的列，而第二列会出现滚动条。
由于它们的内容是动态加载的，我不知道任何一列的高度。
如果使用flex可以实现我想要的结果，我也不需要使用grid。
.grid {
display: flex;
}
.item1 {
background-color: #00ffff;
}
.item2 {
background-color: #ff00ff;
overflow-y: auto;
}
<div class='grid'>
<div class='item1'>
<div class='item1_content'>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
</div>
<div class='item2'>
<div class='item2_content'>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
</div>
</div>
英文:
As you can see in my snippet, both columns are getting their heights set to the height of the tallest column. I however want my columns to have their heights set to the shortest column, where the second column would have overflow scroll instead.
I do not know the height of either of the columns as their content is loaded in dynamically.
I also do not need to use grid if flex can acheive my desired result.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.item1 {
background-color: #00ffff;
}
.item2 {
background-color: #ff00ff;
overflow-y: auto;
}
<!-- language: lang-html -->
<div class='grid'>
<div class='item1'>
<div class='item1_content'>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
</div>
<div class='item2'>
<div class='item2_content'>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
</div>
</div>
<!-- end snippet -->
答案1
得分: 2
You could use javascript for this.
I think there isn't a CSS only solution for this 
let referenceBox = document.getElementsByClassName("item1_content")[0];
let adjustedBox = document.getElementsByClassName("item2_content")[0];
adjustedBox.style.height = referenceBox.offsetHeight + 'px';
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.item1 {
background-color: #00ffff;
}
.item2 {
background-color: #ff00ff;
overflow-y: auto;
}
<div class='grid'>
<div class='item1'>
<div class='item1_content'>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
</div>
<div class='item2'>
<div class='item2_content'>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
</div>
</div>
英文:
You could use javascript for this.
I think there isn't a CSS only solution for this
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
let referenceBox = document.getElementsByClassName("item1_content")[0];
let adjustedBox = document.getElementsByClassName("item2_content")[0];
adjustedBox.style.height = referenceBox.offsetHeight + 'px';
<!-- language: lang-css -->
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.item1 {
background-color: #00ffff;
}
.item2 {
background-color: #ff00ff;
overflow-y: auto;
}
<!-- language: lang-html -->
<div class='grid'>
<div class='item1'>
<div class='item1_content'>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
</div>
<div class='item2'>
<div class='item2_content'>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
</div>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论