父元素设置了最小高，子元素高度100%，导致border样式没有撑满

这个问题的原因是子元素的高度计算不包括父元素的边框（border）。解决方法有两种：

1. 将父元素的高度设置为最小高度加上边框的高度。比如，如果父元素的最小高度是200px，边框高度为2px，那么可以将父元素的高度设置为202px。

2. 让子元素的高度计算包括父元素的边框。可以通过将子元素的box-sizing属性设置为border-box来实现。这样子元素的高度计算就会包括边框的高度了，border样式也就可以撑满了。

例如：

.parent {
  min-height: 200px;
  border: 2px solid #000;
}

.child {
  height: 100%;
  box-sizing: border-box;
}

相关问题

如果不设置父元素的高度为100%，是否有别的处理办法？

如果不设置父元素的高度为100%，您可以尝试使用以下CSS样式来解决：

<div style="position: relative;">
  <div id="dv" style="border: solid 1px red; overflow: auto; margin-bottom: 10px; position: absolute; top: 0; bottom: 0; left: 0; right: 0;">xxxxx</div>
</div>

这样设置的话，`id="dv"` 的 div 元素会绝对定位，同时它的 top、bottom、left 和 right 属性都设置为 0，这样就可以让它占据整个父元素的高度了。而父元素要设置为`position:relative;`，这样 `id="dv"` 就可以相对于父元素进行定位了。

子元素高度自适应,父元素完整展示前两个元素

可以使用CSS的flex布局实现这个效果。具体做法是将父元素设置为flex容器，子元素的高度设置为自适应，并且将父元素的flex-wrap属性设置为wrap。这样可以让子元素自动换行，并且前两个子元素会完整展示出来。

以下是示例代码：

HTML:

<div class="parent">
  <div class="child">子元素1</div>
  <div class="child">子元素2</div>
  <div class="child">子元素3</div>
  <div class="child">子元素4</div>
  <div class="child">子元素5</div>
</div>

CSS:

.parent {
  display: flex;
  flex-wrap: wrap;
}
.child {
  height: auto;
  flex-basis: 50%;
  box-sizing: border-box;
}

在上面的示例中，父元素的flex-wrap属性被设置为wrap，这表明子元素会自动换行。子元素的高度设置为auto，这样它们的高度会根据内容自适应。flex-basis属性被设置为50%，这样每个子元素的宽度会占据父元素的一半。最后，box-sizing属性被设置为border-box，这样可以保证子元素的边框和内边距不会撑开它们的宽度。