html - 无法将边界扩展到容器的宽度之外

Question

.container {
  display: flex;
  justify-content: start;
  border-right:1px solid black;
}

.side-nav {
  border-right: 1px solid #111;
  height: 200px;
  padding-right: 20px;
}

.main-content {
  margin-right: 20px;
  margin-left: 20px;
}

.divider {
  border-bottom: 1px solid gray;
}

.divider:before{
    position: relative;
        content: "";
        width: 100%;
        top: 1px;
        right: 22px;
        padding-right: 20px;
        padding-left: 20px;
        border-bottom: 1px solid gray;
}

<div class="container">
  <div class="side-nav">
    one
  </div>
  <div class="main-content">
    two

    <div class="divider"></div>
      <p>some content gdvsgsgfghdgfhgdsfgdsgfdsfgdsfgdsgfgdsfgdsgfdsgfdsgfgdsgfffdfghjfghj</p>
      <div class="divider"></div>
   </div>
   </div>

我正在创建页面布局。在容器内部，有两个容器——side-nav 和 main-content。在主要内容中，有一个带有一些演示文本的 p 标签。 p 标签被两个边框容器包围。我无法将边界线扩展到主容器宽度。我已经给出了它的一个片段，有人可以帮我解决这个问题吗。

Answer 1

如果我理解正确，请添加 flex: 1到 .main-content 所以它将占用剩下的整个宽度。

.container {
  display: flex;
  justify-content: start;
  border-right: 1px solid black;
}

.side-nav {
  border-right: 1px solid #111;
  height: 200px;
  padding-right: 20px;
}

.main-content {
  margin-right: 20px;
  margin-left: 20px;
  flex: 1;
}

.divider {
  border-bottom: 1px solid gray;
}

.divider:before {
  position: relative;
  content: "";
  width: 100%;
  top: 1px;
  right: 22px;
  padding-right: 20px;
  padding-left: 20px;
  border-bottom: 1px solid gray;
}

<div class="container">
  <div class="side-nav">
    one
  </div>
  <div class="main-content">
    two

    <div class="divider"></div>
    <p>some content gdvsgsgfghdgfhgdsfgdsgfdsfgdsfgdsgfgdsfgdsgfdsgfdsgfgdsgfffdfghjfghj</p>
    <div class="divider"></div>
  </div>
</div>

但是你这里的问题似乎更多。例如，如果没有足够的空间，右边框将显示在文本的顶部。此外，.main-content 左侧的小额外顶部和底部边框。你想做什么？它应该是什么样子？