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

Questions

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

January 9, 2022

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.

>Solution :

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: row;*/
  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>