make parent with no height set get children's height and not grandparent height-CodePudding

I have a container inside a container which has some elements inside of it. I want the parent container to not get grandparent height but get the children's height.

my code: https://jsfiddle.net/grLx7zoq/

To clarify, I want payment-customer-container to not get parent height but have the height of its children.

CodePudding user response：

you have 2 selectors with the functionality...
when changing the first doesn't change the second selector

.payment-customer-container { 
   height: auto;
}

....

.payment-customer-container {
   height: 80vh; /* the browser choose the last */
}

useful documentations:

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Specificity is the means by which browsers decide which CSS property values are the most relevant to an element and, therefore, will be applied. Specificity is based on the matching rules which are composed of different sorts of CSS selectors.

.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 >
    <!-- form -->
    <form action="/payment" method="post">
      <!-- GrandParent -->
      <div  id="payment-customer-container-address">
        <!-- 1 -->
        <div >test1</div>

        <!-- parent -->
        <div >

          <!-- 1st child -->
          <div >
            <!-- 2 -->
            <label >test2:</label>

            <!-- select -->
            <select  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 >
            <!-- 6 -->
            <label >test6:</label>
            <!-- input -->
            <input type="text"  placeholder="test" id="customer-address" name="customer-address" />
          </div>

          <!-- 3rd child -->
          <div  style="margin-top: 0.5vh;">
            <!-- 7 -->
            <label >test7</label>

            <div >
              <div >
                <span ><i ></i></span>
                <span>test8</span>
              </div>
            </div>
          </div>

        </div>
      </div>

    </form>
  </div>
</body>

</html>