Почему мой текст складывается с отображением flex?

Question

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

Я пробовалwidth: auto, но это не сработает.

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

<div class="container">
        <h2>Section I.</h2>
        <div class="row">
            <div class="col one">
                <label for="origin__location">Origin Location</label>
                <div class="underline"></div>
            </div>
        </div>
    </div>


    [.container{
    margin-left: 1em;
  }
  .row{
    width: 100%;
    display: flex;
    margin-bottom: 2em;
    margin-left: 10px;
  }
  .col{
    display: flex;
  }
  .one{
    flex: 1;
  }
  label{
    width: auto;
  }
  .underline{
    border-bottom: solid .5px #000;
    width: 100%;
    margin-left: 1em;
  }

Я хочу, чтобы мой текст был в одной строке и работал для слов с большим и / или меньшим количеством символов, чем у меня уже есть.

Answer 1

Вы можете установить width определение для вас label элемента, либо фиксированной ширины, либо в процентах:

  .container{
    margin-left: 1em;
  }
  .row{
    width: 100%;
    display: flex;
    margin-bottom: 2em;
    margin-left: 10px;
  }
  .col{
    display: flex;
    width: 120px;
  }
  .one{
    flex: 1;
  }
  label{
    width: 25%;
  }
  .underline{
    border-bottom: 0.5px  solid black;
    width: 100%;
    margin-left: 1em;
  }

<div class="container">
        <h2>Section I.</h2>
        <div class="row">
            <div class="col one">
                <label for="origin__location">Origin Location</label>
                <div class="underline"></div>
            </div>
        </div>
    </div>


  

Answer 2

Я добавил white-space:pre; к label.

.container{
    margin-left: 1em;
  }
  .row{
    width: 100%;
    display: flex;
    margin-bottom: 2em;
    margin-left: 10px;
  }
  .col{
    display: flex;
  }
  .one{
    flex: 1;
  }
  label{
    width: auto;
    white-space:pre;
  }
  .underline{
    border-bottom: solid .5px #000;
    width: 100%;
    margin-left: 1em;
  }

<div class="container">
        <h2>Section I.</h2>
        <div class="row">
            <div class="col one">
                <label for="origin__location">Origin Location</label>
                <div class="underline"></div>
            </div>
        </div>
</div>