我有一个容器，里面有一些元素。我希望父容器不获取祖父母的高度，而是获取子容器的高度。
我的代码：https://jsfiddle.net/grLx7zoq/
为了澄清，我希望payment-customer-container不获取父对象的身高，而是具有其子对象的身高。
您有两个选择器，具有以下功能。。。
当改变第一个并不改变第二个选择器时
.payment-customer-container {
height: auto;
}
....
.payment-customer-container {
height: 80vh; /* the browser choose the last */
}
有用的文档：
- https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
特定性是浏览器决定哪些CSS属性值与元素最相关，因此将被应用的手段。具体性是基于匹配规则，这些规则由不同种类的CSS选择器组成。
.payment-customer-container {
width: 40vw;
padding: 1rem;
background-color: hsl(0, 0%, 97%);
border-radius: 0.5rem;
margin-left: 30vw;
margin-top: 8.5vh;
/* deleted margin: 80vh -> TO BECOME auto*/
height: auto;
/*align and justify don't work without display, so I putted it*/
/*personally I prefer grid or flex-direction: column;*/
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.payment-customer-header {
font-family: 'Heebo-Regular';
font-size: 1.5rem;
text-align: center;
}
.payment-customer-body {
width: 100%;
margin-top: 5vh;
}
.payment-customer-input-container {
width: 100%;
display: flex;
flex-direction: row-reverse;
margin-top: 3vh;
align-items: center;
}
.payment-customer-label {
flex: 2;
padding: 1rem;
font-family: 'heebo-light';
font-size: 1.2rem;
text-align: right;
direction: rtl;
}
.payment-customer-input {
flex: 3;
direction: rtl;
text-align: right;
height: 4vh;
border: none;
border-bottom: 2px solid #888;
background-color: hsl(0, 0%, 97%);
}
.payment-customer-input:focus {
outline: none;
}
.payment-customer-input::placeholder {
font-family: 'heebo-light';
}
.payment-customer-input:-ms-input-placeholder {
font-family: 'heebo-light';
}
.payment-customer::-ms-input-placeholder {
font-family: 'heebo-light';
}
.payment-customer-input::-moz-placeholder {
font-family: 'heebo-light';
}
.payment-customer-city-results-container {
flex: 3;
display: flex;
flex-direction: column;
}
.payment-customer-city-result {
height: 5vh;
line-height: calc(5vh - 1rem);
background-color: white;
padding: 0.5rem;
margin-top: 10px;
text-align: right;
font-family: 'heebo-light';
font-size: 1rem;
cursor: pointer;
}
.payment-customer-city-result-chevron {
position: absolute;
left: 2vw;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="payment-container">
<!-- form -->
<form action="/payment" method="post">
<!-- GrandParent -->
<div class="payment-customer-container fadeInBottom" id="payment-customer-container-address">
<!-- 1 -->
<div class="payment-customer-header">test1</div>
<!-- parent -->
<div class="payment-customer-body">
<!-- 1st child -->
<div class="payment-customer-input-container">
<!-- 2 -->
<label class="payment-customer-label">test2:</label>
<!-- select -->
<select class="payment-customer-input" id="payment-customer-select-city" name="payment-customer-select-city">
<option value="" disabled selected>test</option>
<!-- 3 -->
<option value="test">test3</option>
<!-- 4 -->
<option value="test">test4</option>
<!-- 5 -->
<option value="test">test5</option>
</select>
</div>
<!-- 2nd child -->
<div class="payment-customer-input-container">
<!-- 6 -->
<label class="payment-customer-label">test6:</label>
<!-- input -->
<input type="text" class="payment-customer-input" placeholder="test" id="customer-address" name="customer-address" />
</div>
<!-- 3rd child -->
<div class="payment-customer-input-container" style="margin-top: 0.5vh;">
<!-- 7 -->
<label class="payment-customer-label">test7</label>
<div class="payment-customer-city-results-container">
<div class="payment-customer-city-result">
<span class="payment-customer-city-result-chevron"><i class="fas fa-chevron-left"></i></span>
<span>test8</span>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</body>
</html>