内容显示在其div之外

Question

我有几个框（代码片段中只有一个），每个框中的内容量不同，我希望它们自动调整大小以适应内容。目前内容溢出并且未包含在框内。我用过overflow：hidden;但这似乎没有帮助。

由于

#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">
	<div class="timeline_divider"><div></div></div>
	<div class="timeline_object">
		<div class="elections_timeline_left">
			<div class="date_circle"></div>
			<p>17 Jan 2017</p>
		</div>
		<div class="elections_timeline_right">
			<div class="elections_timeline_info">
				<div class="timeline_details">
					<h3>Nominations are now open!</h3>
					<p>Take our quiz to see which role you'd be best suited to.</p>
					<a href="/representation/elections" class="goButton">Nominate Yourself</a>
					<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>
					<a href="/representation/elections" class="goButton">Nominate a friend</a>
				</div>				
			</div>
		</div>
	</div>
</div>

Answer 1

您的问题是您正在设置max-height:165px，删除它并且您已设置！

#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">
	<div class="timeline_divider"><div></div></div>
	<div class="timeline_object">
		<div class="elections_timeline_left">
			<div class="date_circle"></div>
			<p>17 Jan 2017</p>
		</div>
		<div class="elections_timeline_right">
			<div class="elections_timeline_info">
				<div class="timeline_details">
					<h3>Nominations are now open!</h3>
					<p>Take our quiz to see which role you'd be best suited to.</p>
					<a href="/representation/elections" class="goButton">Nominate Yourself</a>
					<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>
					<a href="/representation/elections" class="goButton">Nominate a friend</a>
				</div>				
			</div>
		</div>
	</div>
</div>

Answer 2

将max-height更改为min-height。如果文本太长而无法适应给定的最小高度，它将自动更改框的高度。

Answer 3

将height:100%更改为max-height:165px。问题在于您要限制高度#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; height: 100%; 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; }需要删除该限制

＆＃13;

＆＃13;

<div id="leadership_elections_timeline">
	<div class="timeline_divider"><div></div></div>
	<div class="timeline_object">
		<div class="elections_timeline_left">
			<div class="date_circle"></div>
			<p>17 Jan 2017</p>
		</div>
		<div class="elections_timeline_right">
			<div class="elections_timeline_info">
				<div class="timeline_details">
					<h3>Nominations are now open!</h3>
					<p>Take our quiz to see which role you'd be best suited to.</p>
					<a href="/representation/elections" class="goButton">Nominate Yourself</a>
					<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>
					<a href="/representation/elections" class="goButton">Nominate a friend</a>
				</div>				
			</div>
		</div>
	</div>
</div>

＆＃13;

i

＆＃13;

＆＃13;

＆＃13;

Answer 4

只需从max-height

中删除.elections_timeline_info即可

＆＃13;

＆＃13;

#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;
  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;
}

＆＃13;

<div id="leadership_elections_timeline">
	<div class="timeline_divider"><div></div></div>
	<div class="timeline_object">
		<div class="elections_timeline_left">
			<div class="date_circle"></div>
			<p>17 Jan 2017</p>
		</div>
		<div class="elections_timeline_right">
			<div class="elections_timeline_info">
				<div class="timeline_details">
					<h3>Nominations are now open!</h3>
					<p>Take our quiz to see which role you'd be best suited to.</p>
					<a href="/representation/elections" class="goButton">Nominate Yourself</a>
					<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>
					<a href="/representation/elections" class="goButton">Nominate a friend</a>
				</div>				
			</div>
		</div>
	</div>
</div>

＆＃13;

＆＃13;

＆＃13;