html - 如何仅在底部创建一个带有边框和半径的 div，在另一个带有边框和半径的 div 内

Question

我需要一个具有盒子机智的组件，border并且border-radius在该组件内部，我需要一个带有border* 和border-radius底部的标题。

我写这个小提琴是为了更好地理解： 小提琴

编码：

border-1 {
  width: 100px;
  height: 100px;
  background-color: #ccc;
  margin: 50px;
  border: 1px solid black;
  display: flex;
  border-radius: 3px;
}

border-2 {
  flex: 1 1 auto;
  border: 1px solid black;
  height: 30px;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
}

<border-1>
  <border-2>

  </border-2>
</border-1>

预期结果：

但是有时我在添加一些填充或出现滚动条时会得到这个：

有人可以解释我为什么吗？谢谢。

标签： htmlcss

Answer 1

用于position:relative父母和position:absolute孩子

还添加到子项width:calc(100% - 2px);（-2px：1px用于边界右边+ 1px界左边界）

border-1 {
    width:100px;
    height:100px;
    background-color:#ccc;
    margin:50px;
    border:1px solid black;
    display:flex;
    border-radius: 3px;
    position:relative;
}

border-2 {
  flex:1 1 auto;
  border:1px solid black;
  height: 30px;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  position:absolute;
  width:calc(100% - 2px);
}

<border-1>
  <border-2>
    
  </border-2>
</border-1>