高度100%的Fieldset孩子太大了

Question

我试图将一个fieldset孩子伸展到100%,但是孩子(ul)太大而且出现了一些溢出(在我的情况下被削减).

如何将fieldset孩子伸展到100%,但没有溢出？

fieldset {
  height: 300px;
  overflow: hidden;
}
ul {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-around;
    background-color: #ffffbb;
}

<fieldset>
  <legend>How to stretch child</legend>
  <ul>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li>item 4</li>
    <li>item 5</li>
    <li>item 6</li>
    <li>item 7</li>
    <li>item 8</li>
  </ul>
</fieldset>

以防万一这里也是外部小提琴:小提琴中的例子.

编辑:

将高度设置为特定像素是必要的.我从C#windows应用程序通过WebSocket获得表单布局(设计).每个组件都是绝对位置,具有与C#应用程序完全相同的属性.这意味着,左,上,宽度和高度.

Answer 1

解决方案

将其添加到您的代码中：

ul { margin: 0; }

ul { margin: 0; }

fieldset {
  height: 300px;
  overflow: hidden;
}
ul {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: space-around;
  background-color: #ffffcc;
  margin: 0;
}

解释

具有由浏览器样式表ul添加的默认顶部和底部边距。

这些边距添加到 时height: 100%会导致溢出。

但即使溢出问题得到解决，项目 #8 仍紧紧地包裹在容器的底部边缘：

这是因为 的line-height也legend创建了高度（demo withline-height: 0）

您可以通过以下两种方法来处理此问题：

1. 定义图例的高度，然后调整图例的高度ul。像这样的东西：

   legend {
      height: 15px;
   }
   
   ul {
      height: calc(100% - 15px);
   }
   

   演示

2. 降低 的高度ul，如下所示：

   ul { height: 95%; }
   

   演示