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

Question

我需要一个带有border和border-radius框的组件，并且在此组件内，我需要一个标题为border *和border-radius在底部的标题。

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

代码：

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>

预期结果：

但是有一段时间我在添加一些填充或出现滚动条时得到了这个提示：

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

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>

Answer 2

这是您更改的Fiddle。

您只需要将border:1px solid black;更改为border-bottom:1px solid black;，使边框仅在底部。

结果如下：

这是边界2的完整CSS：

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

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-bottom: 1px solid black;
  height: 30px;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
}

<border-1>
  <border-2>

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

Answer 3

希望您会发现它有用！

.outer{
width:300px;
border-radius:10px;
border:4px solid #000;
background-color:green;
height:200px;
}
.outer .inner{
max-width:100%;
border-radius:0px 0px 10px 10px;
border:4px solid #000;
background-color:red;
height:80px;
}

<div class="outer">
<div class="inner"></div>
</div>