元素超出权限

Question

我的CSS有点问题。

如果运行fiddle（由于StackOverflow主体限制，必须使用小提琴），然后查看CASES的灰色背景。

然后您会看到Cases的所有内容都很好地位于灰色区域内。但是，如果单击Casefamily，则会发现Casefamily超出了灰色区域。这涵盖了我的文档部分的内容。

如何使“灰色”区域扩展到其内容？

<div id="pvCases_d30dcf2a">
  <div class="Cases_d30dcf2a" style="display: none;">
    <div class="row">
      <div class="col-md-12">
        <div class="Controllers_d30dcf2a">
          <input class="search_d30dcf2a" placeholder="Search..">
          <div class="catchWordContainer_d30dcf2a">
            <input class="catchWord_d30dcf2a" placeholder="Catchword">
            <div class="catchWordSuggestion_d30dcf2a"></div>
          </div>
          <div class="dropdown_d30dcf2a">
            <div class="selected_d30dcf2a">
              <span> Applicant/Proprietor</span><i class="fa fa-caret-down"></i>
            </div>
            <div class="options_d30dcf2a" style="display: none;">
            </div>
          </div>
          <div class="rightContainer_d30dcf2a">
            <button type="button" id="SaveSearchResult">Save</button>
            <div class="SearchCollection_d30dcf2a">
              <div class="selected_d30dcf2a">
                <span> </span><i class="fa fa-caret-down"></i>
              </div>
              <div class="SearchCollectionOptions_d30dcf2a">
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-12">
        <div class="CaseTable_d30dcf2a">
          <table class="table table-striped">
            <thead>
              <tr>








                <th><span>Case Title</span><i class="fa fa-caret-down"></i>
                  <div class="filter_options_d30dcf2a" style="display: none;">
                    <div class="row">
                      <div class="col-md-12">
                        <div class="AtoZ_d30dcf2a">A to Z</div>
                      </div>
                      <div class="col-md-12">
                        <div class="ZtoA_d30dcf2a">Z to A</div>
                      </div>
                    </div>
                  </div>
                </th>
                <th><span>Case Number</span><i class="fa fa-caret-down"></i>
                  <div class="filter_options_d30dcf2a" style="display: none;">
                    <div class="row">
                      <div class="col-md-12">
                        <div class="AtoZ_d30dcf2a">A to Z</div>
                      </div>
                      <div class="col-md-12">
                        <div class="ZtoA_d30dcf2a">Z to A</div>
                      </div>
                    </div>
                  </div>
                </th>
                <th><span>Status</span><i class="fa fa-caret-down"></i>
                  <div class="filter_options_d30dcf2a" style="display: none;">
                    <div class="row">
                      <div class="col-md-12">
                        <div class="AtoZ_d30dcf2a">A to Z</div>
                      </div>
                      <div class="col-md-12">
                        <div class="ZtoA_d30dcf2a">Z to A</div>
                      </div>
                    </div>
                  </div>
                </th>
                <th class="defaultHidden_d30dcf2a"><span>Case Type</span><i class="fa fa-caret-down"></i>
                  <div class="filter_options_d30dcf2a" style="display: none;">
                    <div class="row">
                      <div class="col-md-12">
                        <div class="AtoZ_d30dcf2a">A to Z</div>
                      </div>
                      <div class="col-md-12">
                        <div class="ZtoA_d30dcf2a">Z to A</div>
                      </div>
                    </div>
                  </div>
                </th>
                <th class="defaultHidden_d30dcf2a"><span>Family</span><i class="fa fa-caret-down"></i>
                  <div class="filter_options_d30dcf2a" style="display: none;">
                    <div class="row">
                      <div class="col-md-12">
                        <div class="AtoZ_d30dcf2a">A to Z</div>
                      </div>
                      <div class="col-md-12">
                        <div class="ZtoA_d30dcf2a">Z to A</div>
                      </div>
                    </div>
                  </div>
                </th>
                <th class="defaultHidden_d30dcf2a"><span>Country</span><i class="fa fa-caret-down"></i>
                  <div class="filter_options_d30dcf2a" style="display: none;">
                    <div class="row">
                      <div class="col-md-12">
                        <div class="AtoZ_d30dcf2a">A to Z</div>
                      </div>
                      <div class="col-md-12">
                        <div class="ZtoA_d30dcf2a">Z to A</div>
                      </div>
                    </div>
                  </div>
                </th>
                <th><span>Catchword</span><i class="fa fa-caret-down"></i>
                  <div class="filter_options_d30dcf2a" style="display: none;">
                    <div class="row">
                      <div class="col-md-12">
                        <div class="AtoZ_d30dcf2a">A to Z</div>
                      </div>
                      <div class="col-md-12">
                        <div class="ZtoA_d30dcf2a">Z to A</div>
                      </div>
                    </div>
                  </div>
                </th>
                <th><span>Applicant/Proprietor</span><i class="fa fa-caret-down"></i>
                  <div class="filter_options_d30dcf2a" style="display: none;">
                    <div class="row">
                      <div class="col-md-12">
                        <div class="AtoZ_d30dcf2a">A to Z</div>
                      </div>
                      <div class="col-md-12">
                        <div class="ZtoA_d30dcf2a">Z to A</div>
                      </div>
                    </div>
                  </div>
                </th>
                <th class="defaultHidden_d30dcf2a"><span>Inventor</span><i class="fa fa-caret-down"></i>
                  <div class="filter_options_d30dcf2a" style="display: none;">
                    <div class="row">
                      <div class="col-md-12">
                        <div class="AtoZ_d30dcf2a">A to Z</div>
                      </div>
                      <div class="col-md-12">
                        <div class="ZtoA_d30dcf2a">Z to A</div>
                      </div>
                    </div>
                  </div>
                </th>
                <th class="defaultHidden_d30dcf2a"><span>Description</span><i class="fa fa-caret-down"></i>
                  <div class="filter_options_d30dcf2a" style="display: none;">
                    <div class="row">
                      <div class="col-md-12">
                        <div class="AtoZ_d30dcf2a">A to Z</div>
                      </div>
                      <div class="col-md-12">
                        <div class="ZtoA_d30dcf2a">Z to A</div>
                      </div>
                    </div>
                  </div>
                </th>
                <th class="defaultHidden_d30dcf2a"><span>Classes</span><i class="fa fa-caret-down"></i>
                  <div class="filter_options_d30dcf2a" style="display: none;">
                    <div class="row">
                      <div class="col-md-12">
                        <div class="AtoZ_d30dcf2a">A to Z</div>
                      </div>
                      <div class="col-md-12">
                        <div class="ZtoA_d30dcf2a">Z to A</div>
                      </div>
                    </div>
                  </div>
                </th>
                <th class="defaultHidden_d30dcf2a"><span>Appl. Date</span><i class="fa fa-caret-down"></i>
                  <div class="filter_options_d30dcf2a" style="display: none;">
                    <div class="row">
                      <div class="col-md-12">
                        <div class="AtoZ_d30dcf2a">A to Z</div>
                      </div>
                      <div class="col-md-12">
                        <div class="ZtoA_d30dcf2a">Z to A</div>
                      </div>
                    </div>
                  </div>
                </th>
                <th class="defaultHidden_d30dcf2a"><span>Reg Date</span><i class="fa fa-caret-down"></i>
                  <div class="filter_options_d30dcf2a" style="display: none;">
                    <div class="row">
                      <div class="col-md-12">
                        <div class="AtoZ_d30dcf2a">A to Z</div>
                      </div>
                      <div class="col-md-12">
                        <div class="ZtoA_d30dcf2a">Z to A</div>
                      </div>
                    </div>
                  </div>
                </th>
                <th class="defaultHidden_d30dcf2a"><span>Abandoned Date</span><i class="fa fa-caret-down"></i>
                  <div class="filter_options_d30dcf2a" style="display: none;">
                    <div class="row">
                      <div class="col-md-12">
                        <div class="AtoZ_d30dcf2a">A to Z</div>
                      </div>
                      <div class="col-md-12">
                        <div class="ZtoA_d30dcf2a">Z to A</div>
                      </div>
                    </div>
                  </div>
                </th>
                <th class="option_container_d30dcf2a">
                  <i class="fa fa-cog cog_d30dcf2a"></i>
                  <div class="cog_options_d30dcf2a">
                    <div class="row"></div>
                    <button class="SettingTableOptions_d30dcf2a">Save</button>
                  </div>
                </th>
              </tr>
            </thead>
            <tbody>

              <tr data-content="{&quot;Id&quot;:1,&quot;Title&quot;:&quot;Feed for salmonids&quot;,&quot;Case_Number&quot;:&quot;P47931PC01&quot;,&quot;Status&quot;:&quot;Filed&quot;,&quot;Case_Type&quot;:&quot;Parent&quot;,&quot;Family&quot;:&quot;Test&quot;,&quot;Country&quot;:&quot;Denmark&quot;,&quot;Catchword&quot;:&quot;Web&quot;,&quot;Applicant_x002f_Proprietor&quot;:&quot;P47931PC01&quot;,&quot;Inventor&quot;:&quot;Konfab&quot;,&quot;Description&quot;:&quot;<div class=\&quot;ExternalClass4AF54D6F770C4D72987907C1A07DEA48\&quot;><p>&#8203;Something<br><br></p></div>&quot;,&quot;Classes&quot;:&quot;dunno&quot;,&quot;Appl_x002e_Date&quot;:&quot;2018-06-21T22:00:00Z&quot;,&quot;RegDate&quot;:&quot;2018-06-21T22:00:00Z&quot;,&quot;Abandoneddate&quot;:null,&quot;Picture&quot;:null,&quot;ID&quot;:1}">
                <td>Feed for salmonids</td>
                <td>P47931PC01</td>
                <td>Filed</td>
                <td class="defaultHidden_d30dcf2a">Parent</td>
                <td class="defaultHidden_d30dcf2a">Test</td>
                <td class="defaultHidden_d30dcf2a">Denmark</td>
                <td>Web</td>
                <td>P47931PC01</td>
                <td class="defaultHidden_d30dcf2a">Konfab</td>
                <td class="defaultHidden_d30dcf2a">
                  <div class="ExternalClass4AF54D6F770C4D72987907C1A07DEA48">
                    <p>&#8203;Something<br><br></p>
                  </div>
                </td>
                <td class="defaultHidden_d30dcf2a">dunno</td>
                <td class="defaultHidden_d30dcf2a">2018-06-21T22:00:00Z</td>
                <td class="defaultHidden_d30dcf2a">2018-06-21T22:00:00Z</td>
                <td class="defaultHidden_d30dcf2a">null</td>
                <td></td>
              </tr>
              <tr data-content="{&quot;Id&quot;:2,&quot;Title&quot;:&quot;case test&quot;,&quot;Case_Number&quot;:&quot;P47931PC02&quot;,&quot;Status&quot;:&quot;Filed&quot;,&quot;Case_Type&quot;:&quot;Parent&quot;,&quot;Family&quot;:&quot;Test&quot;,&quot;Country&quot;:&quot;Denmark&quot;,&quot;Catchword&quot;:&quot;Web&quot;,&quot;Applicant_x002f_Proprietor&quot;:&quot;P47931PC02&quot;,&quot;Inventor&quot;:&quot;Konfab&quot;,&quot;Description&quot;:&quot;<div class=\&quot;ExternalClass3E913664A3344C909C30924BD9212012\&quot;><p>&#8203;Something&#8203;<br></p></div>&quot;,&quot;Classes&quot;:&quot;dunno&quot;,&quot;Appl_x002e_Date&quot;:&quot;2018-06-21T22:00:00Z&quot;,&quot;RegDate&quot;:&quot;2018-06-21T22:00:00Z&quot;,&quot;Abandoneddate&quot;:null,&quot;Picture&quot;:null,&quot;ID&quot;:2}">
                <td>case test</td>
                <td>P47931PC02</td>
                <td>Filed</td>
                <td class="defaultHidden_d30dcf2a">Parent</td>
                <td class="defaultHidden_d30dcf2a">Test</td>
                <td class="defaultHidden_d30dcf2a">Denmark</td>
                <td>Web</td>
                <td>P47931PC02</td>
                <td class="defaultHidden_d30dcf2a">Konfab</td>
                <td class="defaultHidden_d30dcf2a">
                  <div class="ExternalClass3E913664A3344C909C30924BD9212012">
                    <p>&#8203;Something&#8203;<br></p>
                  </div>
                </td>
                <td class="defaultHidden_d30dcf2a">dunno</td>
                <td class="defaultHidden_d30dcf2a">2018-06-21T22:00:00Z</td>
                <td class="defaultHidden_d30dcf2a">2018-06-21T22:00:00Z</td>
                <td class="defaultHidden_d30dcf2a">null</td>
                <td></td>
              </tr>
            </tbody>
          </table>
          <button type="button" class="download_xlsx_d30dcf2a">download as xlsx</button>
        </div>
      </div>
    </div>
  </div>
  <div class="CaseDetails_d30dcf2a" style="display: block;">
    <div class="return_d30dcf2a">
      <span> Cases / </span><span>Feed for salmonids</span>
    </div>
    <div class="CaseDetailContainer_d30dcf2a">
      <ul class="tabs_d30dcf2a group">
        <li><a class="active_d30dcf2a">Case details</a></li>
        <li><a class="">Casefamily</a></li>
      </ul>
      <div class="box_wrap_d30dcf2a">
        <div class="active_d30dcf2a">
          <div class="row">
            <div class="col-md-3">
              <div class="row">
                <div class="col-md-6 left_container_d30dcf2a">
                  <div class="">Case Number</div>
                </div>
                <div class="col-md-6 right_container_d30dcf2a">
                  <div class="">P47931PC01</div>
                </div>
                <div class="col-md-6 left_container_d30dcf2a">
                  <div class="">Status</div>
                </div>
                <div class="col-md-6 right_container_d30dcf2a">
                  <div class="">Filed</div>
                </div>
                <div class="col-md-6 left_container_d30dcf2a">
                  <div class="">Type</div>
                </div>
                <div class="col-md-6 right_container_d30dcf2a">
                  <div class="">Parent</div>
                </div>
                <div class="col-md-6 left_container_d30dcf2a">
                  <div class="">Family</div>
                </div>
                <div class="col-md-6 right_container_d30dcf2a">
                  <div class="">Test</div>
                </div>
                <div class="col-md-6 left_container_d30dcf2a">
                  <div class="">Country</div>
                </div>
                <div class="col-md-6 right_container_d30dcf2a">
                  <div class="">Denmark</div>
                </div>
              </div>
            </div>
            <div class="col-md-3">
              <div class="row">
                <div class="col-md-6 left_container_d30dcf2a">
                  <div class="">Title</div>
                </div>
                <div class="col-md-6 right_container_d30dcf2a">
                  <div class="">Feed for salmonids</div>
                </div>
                <div class="col-md-6 left_container_d30dcf2a">
                  <div class="">Applicant/Proprietor</div>
                </div>
                <div class="col-md-6 right_container_d30dcf2a">
                  <div class="">P47931PC01</div>
                </div>
                <div class="col-md-6 left_container_d30dcf2a">
                  <div class="">Inventor</div>
                </div>
                <div class="col-md-6 right_container_d30dcf2a">
                  <div class="">Konfab</div>
                </div>
                <div class="col-md-6 left_container_d30dcf2a">
                  <div class="">Description</div>
                </div>
                <div class="col-md-6 right_container_d30dcf2a">
                  <div class="">&#8203;Something</div>
                </div>
                <div class="col-md-6 left_container_d30dcf2a">
                  <div class="">Classes</div>
                </div>
                <div class="col-md-6 right_container_d30dcf2a">
                  <div class="">dunno</div>
                </div>
              </div>
            </div>
            <div class="col-md-3">
              <div class="row">
                <div class="col-md-6 left_container_d30dcf2a">
                  <div class="">Appl. date</div>
                </div>
                <div class="col-md-6 right_container_d30dcf2a">
                  <div class="">21-06-2018</div>
                </div>
                <div class="col-md-6 left_container_d30dcf2a">
                  <div class="">Reg. Date</div>
                </div>
                <div class="col-md-6 right_container_d30dcf2a">
                  <div class="">21-06-2018</div>
                </div>
                <div class="col-md-6 left_container_d30dcf2a">
                  <div class="">Next Renewal</div>
                </div>
                <div class="col-md-6 right_container_d30dcf2a">
                  <div class=""></div>
                </div>
                <div class="col-md-6 left_container_d30dcf2a">
                  <div class="">Abandoned date</div>
                </div>
                <div class="col-md-6 right_container_d30dcf2a">
                  <div class=""></div>
                </div>
                <div class="col-md-6 left_container_d30dcf2a">
                  <div class="">Division (subdivision)</div>
                </div>
                <div class="col-md-6 right_container_d30dcf2a">
                  <div class=""></div>
                </div>
              </div>
            </div>
            <div class="col-md-3">
              <img>
            </div>
          </div>
        </div>
        <div class="Casefamily_d30dcf2a">
          <table class="table">
            <thead>
              <tr>
                <th>
                  Case No
                </th>
                <th>
                  Name
                </th>
                <th>
                  Applicant/Proprietor
                </th>
                <th>
                  Appl. date
                </th>
                <th>
                  Status
                </th>
              </tr>
            </thead>
            <tbody>
              <tr class="status_d30dcf2a Filled_d30dcf2a">
                <td>
                  T62039EU02
                </td>
                <td>
                  Casename
                </td>
                <td>

                </td>
                <td>

                </td>
                <td>
                  Filed
                </td>
              </tr>
              <tr class="status_d30dcf2a Registered_d30dcf2a">
                <td>
                  T62039EU03
                </td>
                <td>
                  Casename
                </td>
                <td>

                </td>
                <td>

                </td>
                <td>
                  Registered
                </td>
              </tr>
              <tr class="status_d30dcf2a Pending_d30dcf2a">
                <td>
                  T62039EU04
                </td>
                <td>
                  Casename
                </td>
                <td>

                </td>
                <td>

                </td>
                <td>
                  Pending
                </td>
              </tr>
              <tr class="status_d30dcf2a Registered_d30dcf2a">
                <td>
                  T62039EU05
                </td>
                <td>
                  Casename
                </td>
                <td>

                </td>
                <td>

                </td>
                <td>
                  Registered
                </td>
              </tr>
              <tr class="status_d30dcf2a Registered_d30dcf2a">
                <td>
                  T62039EU06
                </td>
                <td>
                  Casename
                </td>
                <td>

                </td>
                <td>

                </td>
                <td>
                  Registered
                </td>
              </tr>
              <tr class="status_d30dcf2a Registered_d30dcf2a">
                <td>
                  T62039EU07
                </td>
                <td>
                  Casename
                </td>
                <td>

                </td>
                <td>

                </td>
                <td>
                  Registered
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

将position: absolute替换为position: relative，它将扩展父元素

#pvCases_d30dcf2a .CaseDetails_d30dcf2a .CaseDetailContainer_d30dcf2a .box_wrap_d30dcf2a>div {
  position: relative;
}

Answer 2

您好，彼得，它不尊重父级，因为它是一个表，并且表没有响应。最好的解决方案是使父div具有CSS属性overflow-x：scroll，使人们可以查看所有内容并包含您的内容。

#pvCases_d30dcf2a .CaseDetails_d30dcf2a .CaseDetailContainer_d30dcf2a 
.box_wrap_d30dcf2a>div{
 overflow-x : scroll;
}