разместить дочерний элемент с помощью translateY (100%)

Question

Здравствуйте, я пытаюсь использовать преобразование Y (100%) в дочернем элементе, чтобы он был точно ниже общей высоты родительского элемента, но этого не происходит:

I need my options box to be exactly below the total height of the parent element something like that:

const data = [
  {
    id: 1,
    name: "SIMPLES NACIONAL – MEI",
    funcionarioIncrease: 49.99,
    maxFuncionario: 1,
    socioIncrease: 0,
    maxSocio: 5,
    FATURAMENTO: [
      {
        name: "ATÉ 30.000,00",
        value: 49.99,
      },
      {
        name: "De 30.001,00 a 50.000,00 ",
        value: 99.99,
      },
    ],
  },
  {
    id: 2,
    name: "SIMPLES NACIONAL – SERVIÇOS",
    funcionarioIncrease: 25,
    maxFuncionario: 3,
    socioIncrease: 25,
    maxSocio: 5,
    FATURAMENTO: [
      {
        name: "ATÉ 30.000,00",
        value: 149.99,
      },
      {
        name: "De 30.001,00 a 50.000,00 ",
        value: 199.99,
      },
    ],
  },
];

function createInput(id, value) {
  var inputRadio = document.createElement("input");

  if (id && value) {
    inputRadio.id = value;
    inputRadio.name = "category";
    inputRadio.type = "radio";
    inputRadio.value = value;
    inputRadio.classList.add("radio");
    return inputRadio;
  }
  return null;
}

function createOptions() {
  const container = document.querySelector(".options-container");
  data.forEach((value) => {
    const optionDiv = document.createElement("div");
    optionDiv.classList.add("option");
    container.append(optionDiv);
    const input = createInput(value.name, value.id);
    if (!input) {
      return null;
    }
    optionDiv.append(input);
    var label = document.createElement("label");
    label.htmlFor = value.id;
    label.innerHTML = value.name;
    optionDiv.append(label);
  });
}

function initalize() {
  createOptions();
  const selected = document.querySelector(".selected");
  const optionsContainer = document.querySelector(".options-container");
  const optionsList = document.querySelectorAll(".option");

  selected.addEventListener("click", () => {
    optionsContainer.classList.toggle("active");
  });

  optionsList.forEach((o) => {
    o.addEventListener("click", () => {
      let input = o.querySelector("input").id;
      selected.innerHTML = o.querySelector("label").innerHTML;
      selected.setAttribute("data-value", input);
      optionsContainer.classList.remove("active");
    });
  });
}


initalize();

.select-box {
  display: flex;
  width: 100%;
  max-height: 50px;
  flex-direction: column;
  position: relative;
  z-index: 2;
}

.select-box .options-container {
  background: #2f3640;
  color: #f5f6fa;
  max-height: 0;
  width: 100%;
  opacity: 0;
  transition: all 0.4s;
  border-radius: 8px;
  overflow: hidden;
  position: absolute;
  order: 1;
  transform: translateY(100%);
  z-index: 2;
}

.selected {
  background: #2f3640;
  border-radius: 8px;
  margin-bottom: 8px;
  color: #f5f6fa;
  position: relative;

  order: 0;
}

.selected::after {
  content: "";
  background: url("img/arrow-down.svg");
  background-size: contain;
  background-repeat: no-repeat;

  position: absolute;
  height: 100%;
  width: 32px;
  right: 10px;
  top: 5px;

  transition: all 0.4s;
}

.select-box .options-container.active {
  max-height: 240px;
  opacity: 1;
  overflow-y: scroll;
}

.select-box .options-container.active + .selected::after {
  transform: rotateX(180deg);
  top: -6px;
}

.select-box .options-container::-webkit-scrollbar {
  width: 8px;
  background: #0d141f;
  border-radius: 0 8px 8px 0;
}

.select-box .options-container::-webkit-scrollbar-thumb {
  background: #525861;
  border-radius: 0 8px 8px 0;
}

.select-box .option,
.selected {
  padding: 12px 24px;
  cursor: pointer;
}

.select-box .option:hover {
  background: #414b57;
}

.select-box label {
  cursor: pointer;
  color: white;
}

.select-box .option .radio {
  display: none;
}

        <div class="inputs_container">
          <div class="service_mode flex">
            <div class="select-box">
              <div class="options-container"></div>

              <div class="selected">
                Select Video Category
              </div>
            </div>
          </div>
        </div>

Answer 1

Просто добавьте верхнюю позицию как 100% и удалите перевод.

const data = [
  {
    id: 1,
    name: "SIMPLES NACIONAL – MEI",
    funcionarioIncrease: 49.99,
    maxFuncionario: 1,
    socioIncrease: 0,
    maxSocio: 5,
    FATURAMENTO: [
      {
        name: "ATÉ 30.000,00",
        value: 49.99,
      },
      {
        name: "De 30.001,00 a 50.000,00 ",
        value: 99.99,
      },
    ],
  },
  {
    id: 2,
    name: "SIMPLES NACIONAL – SERVIÇOS",
    funcionarioIncrease: 25,
    maxFuncionario: 3,
    socioIncrease: 25,
    maxSocio: 5,
    FATURAMENTO: [
      {
        name: "ATÉ 30.000,00",
        value: 149.99,
      },
      {
        name: "De 30.001,00 a 50.000,00 ",
        value: 199.99,
      },
    ],
  },
];

function createInput(id, value) {
  var inputRadio = document.createElement("input");

  if (id && value) {
    inputRadio.id = value;
    inputRadio.name = "category";
    inputRadio.type = "radio";
    inputRadio.value = value;
    inputRadio.classList.add("radio");
    return inputRadio;
  }
  return null;
}

function createOptions() {
  const container = document.querySelector(".options-container");
  data.forEach((value) => {
    const optionDiv = document.createElement("div");
    optionDiv.classList.add("option");
    container.append(optionDiv);
    const input = createInput(value.name, value.id);
    if (!input) {
      return null;
    }
    optionDiv.append(input);
    var label = document.createElement("label");
    label.htmlFor = value.id;
    label.innerHTML = value.name;
    optionDiv.append(label);
  });
}

function initalize() {
  createOptions();
  const selected = document.querySelector(".selected");
  const optionsContainer = document.querySelector(".options-container");
  const optionsList = document.querySelectorAll(".option");

  selected.addEventListener("click", () => {
    optionsContainer.classList.toggle("active");
  });

  optionsList.forEach((o) => {
    o.addEventListener("click", () => {
      let input = o.querySelector("input").id;
      selected.innerHTML = o.querySelector("label").innerHTML;
      selected.setAttribute("data-value", input);
      optionsContainer.classList.remove("active");
    });
  });
}


initalize();

.select-box {
  display: flex;
  width: 100%;
  max-height: 50px;
  flex-direction: column;
  position: relative;
  z-index: 2;
}

.select-box .options-container {
  background: #2f3640;
  color: #f5f6fa;
  max-height: 0;
  width: 100%;
  opacity: 0;
  transition: all 0.4s;
  border-radius: 8px;
  overflow: hidden;
  position: absolute;
  top:100%;
  order: 1;
  z-index: 2;
}

.selected {
  background: #2f3640;
  border-radius: 8px;
  margin-bottom: 8px;
  color: #f5f6fa;
  position: relative;

  order: 0;
}

.selected::after {
  content: "";
  background: url("img/arrow-down.svg");
  background-size: contain;
  background-repeat: no-repeat;

  position: absolute;
  height: 100%;
  width: 32px;
  right: 10px;
  top: 5px;

  transition: all 0.4s;
}

.select-box .options-container.active {
  max-height: 240px;
  opacity: 1;
  overflow-y: scroll;
}

.select-box .options-container.active + .selected::after {
  transform: rotateX(180deg);
  top: -6px;
}

.select-box .options-container::-webkit-scrollbar {
  width: 8px;
  background: #0d141f;
  border-radius: 0 8px 8px 0;
}

.select-box .options-container::-webkit-scrollbar-thumb {
  background: #525861;
  border-radius: 0 8px 8px 0;
}

.select-box .option,
.selected {
  padding: 12px 24px;
  cursor: pointer;
}

.select-box .option:hover {
  background: #414b57;
}

.select-box label {
  cursor: pointer;
  color: white;
}

.select-box .option .radio {
  display: none;
}

        <div class="inputs_container">
          <div class="service_mode flex">
            <div class="select-box">
              <div class="options-container"></div>

              <div class="selected">
                Select Video Category
              </div>
            </div>
          </div>
        </div>