html - 父分隔线之外的分隔线

Question

我试图在另一个分隔线内添加两个分隔线，但我无法弄清楚如何强制子分隔线位于父分隔线内。

如何控制子分隔线在父分隔线内的位置？

#graph-container {
  border: solid;
}
#graph-info {
  border: solid;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-lg-12">
      <div class="panel with-nav-tabs panel-default">
        <div class="panel-heading">
          <ul class="nav nav-tabs" id="myTab">

            <li class="active"><a href="#home" class="backgroundRed" data-toggle="tab">Main </a>
          </ul>
        </div>
        <div class="panel-body">
          <div class="tab-content">
            <div class="tab-pane active" id="home">Main</div>
            <div class="container" id="graph_panel">
              <div class="row">
                <div class="container col-xs-12 col-sm-12 col-md-8 col-lg-8 bg-info " style="height: 800px;" id="graph-container">

                </div>
                <div class="container col-xs-12 col-sm-12 col-md-4 col-lg-4 bg-danger" style="height: 800px" id="graph-info">

                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

将 width:auto 添加到您的#graph_panel