HTML页眉的下边框不会换行到ToC，但文本会换行.我该如何解决这个问题

Question

我有一个ToC(内容表(表，它被实现为div。它使用以下HTML和CSS：

h3.articletitle {
font-weight: bold;
font-size: 30px;
border-bottom: 1px solid #4F120B;
}
h4.articlesubtitle {
font-weight: bold;
font-size: 22px;
border-bottom: 1px solid #4F120B;
}
h5.articlesubtitle {
font-weight: bold;
font-size: 18px;
border-bottom: 1px solid #4F120B;
}
#toc_container {
background: rgba(92, 9, 0, 0.14);
border: 1px solid #4F120B;
display: block;
font-size: 90%;
margin-bottom: 1em;
margin-right: 1em;
padding: 20px;
width: auto;
}

<div class="book">
<h3 class="articletitle">Title</h3>
<article>
<div style="float: left; margin-left: auto;" id="toc_container">
<p class="toc_title">Contents</p>
<ul class="toc_list">
<li><a  href="#Scociety">Scociety</a></li>
<ul>
<li><a href="#ArtHistory">Art</a></li>
<li><a href="#PopCulture">Pop Culture</a></li>
<li><a href="#HighCulture">High Culture</a></li>
<li><a href="#CommunicationAndTheSpreadOfIdeas">Communication And The Spread Of Ideas</a></li>
<li><a href="#Holidays">Holidays</a></li>
<li><a href="#GenderAndGenderRoles">Gender and Gender Roles</a></li>
<li><a href="#SubculturesAndAlternativeLifestyles">Subcultures and Alternative Lifestyles</a></li>
<li><a href="#UniversalFears">Universal Fears</a></li>
</ul>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<h4 class="articlesubtitle" id="Scociety">Scociety</h4>
<h5 class="articlesubtitle" id="ArtHistory">Art</h5>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
</div>

你可以看到标题下的边框是如何在ToC的div下延伸的。我如何让它们与文本包装？我试着把它们放在自己的div中，并通过百分比调整宽度，但这只适用于全屏。调整大小时，边框将重新插入ToC。

我是网页设计的新手，请保持友好的解释。

Answer 1

添加

.articlesubtitle {
overflow: hidden;
}

规则解决了问题。

h3.articletitle {
font-weight: bold;
font-size: 30px;
border-bottom: 1px solid #4F120B;
}
h4.articlesubtitle {
font-weight: bold;
font-size: 22px;
border-bottom: 1px solid #4F120B;
}
h5.articlesubtitle {
font-weight: bold;
font-size: 18px;
border-bottom: 1px solid #4F120B;
}
.articlesubtitle {
overflow: hidden;
}
#toc_container {
background: rgba(92, 9, 0, 0.14);
border: 1px solid #4F120B;
display: block;
font-size: 90%;
margin-bottom: 1em;
margin-right: 1em;
padding: 20px;
width: auto;
}

<div class="book">
<h3 class="articletitle">Title</h3>
<article>
<div style="float: left; margin-left: auto;" id="toc_container">
<p class="toc_title">Contents</p>
<ul class="toc_list">
<li><a  href="#Scociety">Scociety</a></li>
<ul>
<li><a href="#ArtHistory">Art</a></li>
<li><a href="#PopCulture">Pop Culture</a></li>
<li><a href="#HighCulture">High Culture</a></li>
<li><a href="#CommunicationAndTheSpreadOfIdeas">Communication And The Spread Of Ideas</a></li>
<li><a href="#Holidays">Holidays</a></li>
<li><a href="#GenderAndGenderRoles">Gender and Gender Roles</a></li>
<li><a href="#SubculturesAndAlternativeLifestyles">Subcultures and Alternative Lifestyles</a></li>
<li><a href="#UniversalFears">Universal Fears</a></li>
</ul>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<h4 class="articlesubtitle" id="Scociety">Scociety</h4>
<h5 class="articlesubtitle" id="ArtHistory">Art</h5>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
</div>

Answer 2

添加"溢出：隐藏"到CSS的头导致了预期的行为。