父进程上的maxHeight和溢出y：滚动其中一个子进程 [英] maxHeight on parent and overflow-y: scroll on one of its children

问题描述

可以在父级上设置 maxHeight ，并且一个特定子级（1）占用可用空间， 2） overflow-y：scroll 在那个孩子上设置？

  < div style =max-height：200px> 
< div>标题，我不想在< / div>上指定任何高度
< div style =max-height：auto; overflow-y：scroll> 
< div>长列表中的项目号1> 
< div>项列表2在长列表中> 
 ... 
< / div> 
< / div> 
  

上面的代码和 max-height：auto 不工作。我最近的是只有一个孩子，并将其 max-height 设置为继承 / p>

 < div style =max-height：200px> 
< div style =max-height：inherit; overflow-y：scroll> 
< div>长列表中的项目号1> 
< div>项列表2在长列表中> 
 ... 
< / div> 
< / div> 
  

如果我有2个孩子， max-height：inherit 其中一个，总高度将会太大。

解决方案

。

  .container {display：flex; max-height：100px; flex-direction：column; border：1px solid red;}。header {background：#eee;}。container> div {flex：0 0 auto;}。container> div.content {flex：0 1 auto; overflow：auto;}  
 
 < div class = > < div class =header>无特定高度的标题。始终停留在.container顶部，即使它很长，它占用了两行。< / div> < div class =content> < div>长列表中的项目号1< / div> < div>长列表中的项目号2< / div> < div>长列表中的项目号3< / div> < div>长列表中的项目号4< / div> < div>长列表中的项目5< / div> < div>长列表中的项目6< / div> < div>长列表中的项目号7< / div> < div>长列表中的项目8< / div> < div>长列表中的项目号9< / div> < div>长列表中的项目号10< / div> < div>长列表中的项目号11< / div> < div>长列表中的项目号12< / div> < / div>< / div>  
 

容器来flex显示和给它一个max-height，子元素将只使用这个max-height总。通过将flex-grow设置为1（flex属性中的第二个参数），内容div将占用尽可能多的空间，而标题只使用尽可能多的空间。

It is possible to set maxHeight on a parent and have one specific child (1) take up as mush space as is available and (2) have overflow-y: scroll set on that child?

<div style="max-height: 200px">
  <div>Header that I don't want to specify any height on</div>
  <div style="max-height: auto; overflow-y: scroll">
    <div>Item no 1 in long list>
    <div>Item no 2 in long list>
    ...
  </div>
</div>

The code above and max-height: auto does not work. The closest I've come is to only have ONE child and set its max-height to inherit like so:

<div style="max-height: 200px">
  <div style="max-height: inherit; overflow-y: scroll">
    <div>Item no 1 in long list>
    <div>Item no 2 in long list>
    ...
  </div>
</div>

Which works but if I have 2 children and max-height: inherit on one of them, the total height will be too much.

解决方案

You can use the flexbox option.

.container {
  display: flex;
  max-height: 100px;
  flex-direction: column;
  border: 1px solid red;
}
.header {
  background: #eee;
}

.container > div {
  flex: 0 0 auto;
}
.container > div.content {
  flex: 0 1 auto;
  overflow: auto;
}

<div class="container">
  <div class="header">Header without specific height. Always stays at top of .container, even if it is so long it uses up two lines.</div>
  <div class="content">
    <div>Item no 1 in long list</div>
    <div>Item no 2 in long list</div>
    <div>Item no 3 in long list</div>
    <div>Item no 4 in long list</div>
    <div>Item no 5 in long list</div>
    <div>Item no 6 in long list</div>
    <div>Item no 7 in long list</div>
    <div>Item no 8 in long list</div>
    <div>Item no 9 in long list</div>
    <div>Item no 10 in long list</div>
    <div>Item no 11 in long list</div>
    <div>Item no 12 in long list</div>
  </div>
</div>

By setting the container to flex display and giving it a max-height, the child elements will only use this max-height in total. By setting flex-grow to 1 (second argument in flex property), the content div will take up as much space as possible, while the header only uses as much space as necessary.

这篇关于父进程上的maxHeight和溢出y：滚动其中一个子进程的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！