Сделать ширину строки, содержащей элементы управления html, эквивалентной другой строке, содержащей элементы управления

Question

Элементы управления, такие как Font, Size, Justification, имеют динамическую ширину, то есть их ширина может варьироваться в зависимости от содержимого внутри них.

Допустим, Font очень большой, чтобы поместиться в width этой строки, ширина элемента управления Font select будет автоматически увеличена, что приведет к увеличению ширины строки 1, чего не будет, тогда,такая же, как ширина строки 2.

Но я хочу, чтобы ширина обеих строк была одинаковой все время , независимо от того, увеличивается или уменьшается ширина какого-либо элемента управления.

Если ширина превышает 100%, должна появиться горизонтальная прокрутка.

Примечание. Первоначально ширина обеих строк должна составлять 100%, т. Е. Ширина страницы и, если ширина какой-либо области выделения увеличивается в любой точке., ширина текстового поля заголовка также должна быть увеличена.И обратите внимание, что ширина метки должна быть фиксированной.

Вот то, что я пробовал до сих пор -

.grid-container {
  display: grid;
  grid-template-columns: 12% auto;
  grid-row-gap: 10px;
  overflow-x: auto;
}

.label-margin {
  margin-right: 1%;
}

.control-margin {
  margin-right: 3%;
}

.width-15 {
  min-width: 30%;
}

.width-8 {
  min-width: 8%;
}

.width-12 {
  min-width: 12%;
}

.right {
  display: flex;
}

.fill-width {
  flex: 1;
}

<div class="grid-container">
  <div class="left">
    Font
  </div>
  <div class="right">
    <select class="width-15 control-margin fill-width"></select>
    <label class="label-margin">Size</label>
    <select class="width-8 control-margin fill-width"></select>
    <label class="label-margin">Bold</label>
    <input type="checkbox" class="control-margin" />
    <label class="label-margin">Italic</label>
    <input type="checkbox" class="control-margin" />
    <label class="label-margin">Justification</label>
    <select class="width-12 fill-width"></select>
  </div>
  <div class="left">
    Header
  </div>
  <div class="right">
    <input type="text" class="fill-width" />
  </div>
</div>

Answer 1

Чтобы прояснить проблему, я создал следующий фрагмент (добавил границу к контейнеру .right).Проблема в этом случае заключается в том, что столбец сетки не выходит за пределы исходного размера области просмотра.Как вы видите на ручке, объекты с объявлением flex: 1; растут, чтобы заполнить родительский контейнер.Однако их родительский элемент не выходит за пределы области просмотра.

.grid-container {
  display: grid;
  grid-template-columns: 12% auto;
  grid-row-gap: 10px;
  overflow-x: auto;
}

.label-margin {
  margin-right: 1%;
}

.control-margin {
  margin-right: 3%;
}

.width-15 {
  min-width: 30%;
}

.width-8 {
  min-width: 60%;
}

.width-12 {
  min-width: 12%;
}

.right {
  display: flex;
  border: 4px solid #000;
}

.pink {
  background-color: pink;
}

.fill-width {
  flex: 1;
}

<div class="grid-container">
  <div class="left">
    Font
  </div>
  <div class="right">
    <select class="width-15 control-margin fill-width"></select>
    <label class="label-margin">Size</label>
    <select class="width-8 control-margin fill-width"></select>
    <label class="label-margin">Bold</label>
    <input type="checkbox" class="control-margin" />
    <label class="label-margin">Italic</label>
    <input type="checkbox" class="control-margin" />
    <label class="label-margin">Justification</label>
    <select class="width-12 fill-width"></select>
  </div>
  <div class="left">
    Header
  </div>
  <div class="right pink">
    <input type="text" class="fill-width" />
  </div>
</div>

Если целью является обеспечение четности в размерах строк 1 и 2, я бы создал элемент-обертку с автоматическим переполнением.Таким образом, родительский элемент может иметь одинаковый размер и при этом иметь содержимое с вертикальной прокруткой.

Приведенный ниже фрагмент иллюстрирует решение.

.grid-container {
  display: grid;
  grid-template-columns: 12% auto;
  grid-row-gap: 10px;
}

.label-margin {
  margin-right: 1%;
}

.control-margin {
  margin-right: 3%;
}

.width-15 {
  min-width: 30%;
}

.width-8 {
  min-width: 60%;
}

.width-12 {
  min-width: 12%;
}

.right {
  display: flex;
  border: 4px solid #000;
}

.wrapper {
  display: flex;
  overflow-x: auto;
  flex: 1;
}

.pink {
  background-color: pink;
}

.fill-width {
  flex: 1;
}

<div class="grid-container">
  <div class="left">
    Font
  </div>
  <div class="right">
    <div class="wrapper">
      <select class="width-15 control-margin fill-width"></select>
      <label class="label-margin">Size</label>
      <select class="width-8 control-margin fill-width"></select>
      <label class="label-margin">Bold</label>
      <input type="checkbox" class="control-margin" />
      <label class="label-margin">Italic</label>
      <input type="checkbox" class="control-margin" />
      <label class="label-margin">Justification</label>
      <select class="width-12 fill-width"></select>
    </div>
  </div>
  <div class="left">
    Header
  </div>
  <div class="right pink">
    <div class="wrapper">
      <input type="text" class="fill-width" />
    </div>
  </div>
</div>