Динамически добавленное поле ввода увеличивает ширину контейнера

Question

У меня есть вкладка с заголовком. Я хочу сделать его редактируемым, когда пользователь дважды щелкнет по нему. Поэтому в настоящее время я скрываю div с заголовком и заменяю его, динамически добавляя элемент ввода. Когда я добавляю элемент ввода динамически, размер div заголовка-обертки увеличивается. Я хочу, чтобы мой динамически добавленный ввод имел тот же размер, что и элемент заголовка (который сейчас скрыт). И размер обёртки div должен оставаться таким же. Я пробовал решение с js. Но я ищу решение, просто используя CSS. Можно ли достичь этого варианта использования, используя только css. Я хочу, чтобы мой упаковщик заголовков был жидким, а не фиксированной ширины. Я просто хочу, чтобы мой ввод занимал ту же ширину, что и div с заголовком класса. Ввод должен иметь ту же ширину и размер, что и ширина головы.

function dblClickHanlder(){
  console.log("dbl click handler called");
  let inputEl = document.createElement("input");
  inputEl.style.display="inline-block";
  let headEl = document.querySelector(".head");
  headEl.style.display="none";
  document.querySelector(".header-wrapper").appendChild(inputEl);
  inputEl.focus();
}

* {
    box-sizing: border-box;
}
.wrapper{
  border: 1px solid black;
  display:flex;
  flex:1 0 auto;
}
.header-wrapper{
  display: flex;
  border: 1px solid red;
}

<div class="wrapper">
  <div class="header-wrapper">
    <div ondblclick="dblClickHanlder()" class="head">Heading</div>
 </div>
</div>

Answer 1

Вы можете получить предыдущую ширину и высоту элемента головы перед его удалением и установить для вновь созданного input;

  inputEl.style.width = headEl.offsetWidth + "px";
  inputEl.style.height = headEl.offsetHeight + "px";

проверьте фрагмент ниже:

function dblClickHanlder(){
  console.log("dbl click handler called");
  let headEl = document.querySelector(".head");
  let inputEl = document.createElement("input");
  inputEl.style.width = headEl.offsetWidth + "px";
  inputEl.style.height = headEl.offsetHeight + "px";
  headEl.style.display="none";
  document.querySelector(".header-wrapper").appendChild(inputEl);
  inputEl.focus();
}

* {
    box-sizing: border-box;
}
.wrapper{
  border: 1px solid black;
  display:flex;
  flex:1 0 auto;
}
.header-wrapper{
  display: flex;
  border: 1px solid red;
}

<div class="wrapper">
  <div class="header-wrapper">
    <div ondblclick="dblClickHanlder()" class="head">Heading</div>
 </div>
</div>

Answer 2

Просто добавьте следующий класс к вашему CSS:

.header-wrapper input {
  max-width: 50px;
}

Ниже приведен рабочий пример:

function dblClickHanlder() {
  console.log("dbl click handler called");
  let inputEl = document.createElement("input");
  inputEl.style.display = "inline-block";
  let headEl = document.querySelector(".head");
  headEl.style.display = "none";
  document.querySelector(".header-wrapper").appendChild(inputEl);
  inputEl.focus();
}

* {
  box-sizing: border-box;
}

.wrapper {
  border: 1px solid black;
  display: flex;
  flex: 1 0 auto;
}

.header-wrapper {
  display: flex;
  border: 1px solid red;
}

.header-wrapper input {
  max-width: 50px;
}

<div class="wrapper">
  <div class="header-wrapper">
    <div ondblclick="dblClickHanlder()" class="head">Heading</div>
  </div>
</div>