1
我有几个框（只有一个在代码片段中），每个框的内容都会有不同的数量，我希望它们自动调整大小以适应内容。目前内容已经溢出，并未包含在框中。我用过overflow：hidden;但这似乎没有帮助。在div的外部显示的内容
感谢
#leadership_elections_timeline {
background-color: rgba(92, 177, 255, 0.4);
padding: 0 10%;
position: relative;
display: block;
}
#leadership_elections_timeline .timeline_divider {
width: 100%;
}
#leadership_elections_timeline .timeline_divider > div {
width: 150px;
height: 90px;
border-right: 2px solid #000;
box-sizing: content-box;
}
#leadership_elections_timeline .timeline_object {
width: 100%;
position: relative;
}
#leadership_elections_timeline .timeline_object .elections_timeline_left {
width: 150px;
height: 185px;
float: left;
position: relative;
}
#leadership_elections_timeline .timeline_object .elections_timeline_left .date_circle {
background-color: #fff;
border: 6px solid #000;
width: 23px;
height: 23px;
border-radius: 50%;
position: absolute;
top: 30px;
right: -11.5px;
}
#leadership_elections_timeline .timeline_object .elections_timeline_left p {
padding: 5px;
border-top: 2px dashed #c62428;
color: #000;
position: absolute;
top: 41px;
right: 11px;
}
#leadership_elections_timeline .timeline_object .elections_timeline_right {
overflow: hidden;
border-left: 2px solid #000;
}
#leadership_elections_timeline .timeline_object .elections_timeline_right .elections_timeline_info {
width: 93%;
background-color: #fff;
margin: 0 auto;
border-radius: 15px;
max-height: 165px;
margin-bottom: 20px;
position: relative;
box-shadow: 5px 5px 0 #c62428;
}
#leadership_elections_timeline .timeline_object .elections_timeline_right .elections_timeline_info:after {
content: '';
width: 0;
height: 0;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-right: 15px solid #fff;
position: absolute;
left: -15px;
top: 26px;
}<div id="leadership_elections_timeline">
\t <div class="timeline_divider"><div></div></div>
\t <div class="timeline_object">
\t \t <div class="elections_timeline_left">
\t \t \t <div class="date_circle"></div>
\t \t \t <p>17 Jan 2017</p>
\t \t </div>
\t \t <div class="elections_timeline_right">
\t \t \t <div class="elections_timeline_info">
\t \t \t \t <div class="timeline_details">
\t \t \t \t \t <h3>Nominations are now open!</h3>
\t \t \t \t \t <p>Take our quiz to see which role you'd be best suited to.</p>
\t \t \t \t \t <a href="/representation/elections" class="goButton">Nominate Yourself</a>
\t \t \t \t \t <p>Think you know someone who would make a great full-time officer? Follow the link to let us know, and we'll contact them to see if they've considered running.</p>
\t \t \t \t \t <a href="/representation/elections" class="goButton">Nominate a friend</a>
\t \t \t \t </div> \t \t \t \t
\t \t \t </div>
\t \t </div>
\t </div>
</div>