使子div与父div相同的高度

Question

.propertydetailbox2 {
	overflow:auto;
  border: 1px black solid;
	
}

.propertydetailtextbox {
    width: 30%;
	float:left;
    border: 1px solid #cccccc;
    border-radius: 8px;
	margin: 0 auto;
	margin-right:1%;
	padding:20px;
	padding-left:50px;
	height: auto;
	text-align:left;
}

.propertydetailagentbox {
	width: 30%;
	height: 100%;
	float:left;
    border: 1px solid #cccccc;
    border-radius: 8px;
	margin: 0 auto;
	margin-left:1%;
	padding:20px;
}

<div class ="propertydetailbox2">
	<div class="propertydetailtextbox">1<br>2<br>3<br>4<br> </div>
  
  <div class="propertydetailagentbox">1<br>2</div>
  
  
  
</div>

嗨我有一个容器,其中包含两个盒子(子盒子),我希望父母可以使用已经完成使用的最高孩子的高度overflow:auto;,然后我希望第二个孩子(很短)与父母一样高.我已经尝试过这里给出的各种解决方案CSS - 将float子DIV高度展开到父级的高度,但使用相对和绝对堆栈,子项相互重叠,并使用margin-bottom:-99999px; padding-bottom:99999px; 从底部切割第二个孩子的边界,我需要有响应的解决方案.

父母div

.propertydetailbox2 {
    overflow:auto;
}

child1

.propertydetailtextbox {
    width: 30%;
    float:left;
    border: 1px solid #cccccc;
    border-radius: 8px;
    margin: 0 auto;
    margin-right:1%;
    padding:20px;
    padding-left:50px;
    height: auto;
    text-align:left;
}

的child2

.propertydetailagentbox {
    width: 30%;
    height: 100%;
    float:left;
    border: 1px solid #cccccc;
    border-radius: 8px;
    margin: 0 auto;
    margin-left:1%;
    padding:20px;
}

请看jsfiddle的编辑,div应该是并排的但是在jsfiddle中它们是彼此重叠的

Answer 1

你可以使用display而不是float:

• 柔性

.propertydetailbox2 {
  display: flex;
  border: 1px black solid;
}

.propertydetailtextbox {
  flex: 1;
  border: 1px solid #cccccc;
  border-radius: 8px;
  margin: 0 auto;
  margin-right: 1%;
  padding: 20px;
  padding-left: 50px;
  height: auto;
  text-align: left;
}

.propertydetailagentbox {
  flex: 1;
  border: 1px solid #cccccc;
  border-radius: 8px;
  margin: 0 auto;
  margin-left: 1%;
  padding: 20px;
}

<div class="propertydetailbox2">
  <div class="propertydetailtextbox">1<br>2<br>3<br>4<br> </div>
  <div class="propertydetailagentbox">1<br>2</div>
</div>

• 表

.propertydetailbox2 {
  display: table;
  table-layout:fixed;
  border-spacing:1vw;/* or 1vw 0 or whatever you need */
  width:100%;
  border: 1px black solid;
}

.propertydetailtextbox {
  display:table-cell;
  border: 1px solid #cccccc;
  border-radius: 8px;
  margin: 0 auto;
  margin-right: 1%;
  padding: 20px;
  padding-left: 50px;
  height: auto;
  text-align: left;
}

.propertydetailagentbox {
  display:table-cell;
  border: 1px solid #cccccc;
  border-radius: 8px;
  margin: 0 auto;
  margin-left: 1%;
  padding: 20px;
}

<div class="propertydetailbox2">
  <div class="propertydetailtextbox">1<br>2<br>3<br>4<br> </div>
  <div class="propertydetailagentbox">1<br>2</div>
</div>

• 格

.propertydetailbox2 {
  display: grid;
  grid-template-columns: 50% 50%;
  border: 1px black solid;
}

.propertydetailtextbox {
  border: 1px solid #cccccc;
  border-radius: 8px;
  margin-right: 1%;
  padding: 20px;
  padding-left: 50px;
  height: auto;
  text-align: left;
}

.propertydetailagentbox {
  border: 1px solid #cccccc;
  border-radius: 8px;
  margin-left: 1%;
  padding: 20px;
}

<div class="propertydetailbox2">
  <div class="propertydetailtextbox">1<br>2<br>3<br>4<br> </div>
  <div class="propertydetailagentbox">1<br>2</div>
</div>