CSS: остановить второй дочерний элемент (абзац) от увеличения ширины родителя

Question

У меня есть список коробок flexbox, ширина которых контролируется выпадающим списком и кнопкой рядом с ним. Когда я показываю ошибку (и) ниже, а ошибка (и) длинная, поле увеличивается (по ширине). См. Пример jsFiddle . Как я могу это остановить. Я хочу, чтобы ошибка была перенесена, а окно было таким же широким, как кнопка выбора +. Он все еще должен быть гибким, поэтому нет максимальной ширины для абзаца. И никакой абсолютной позиции. Также реальный код - это не jQuery (AngularJS).

HTML:

<div class="container">
  <ul class="items">
    <li class="item">
      <h2>Title 1</h2>
      <div>
        <select name="item-1-options" id="item-1-options">
          <option value="1">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</option>
          <option value="2">Lorem ipsum dolor sit amet</option>
          <option value="3">Lorem ipsum dolor</option>
        </select>
        <button>Select</button>
      </div>
      <div class="errors">
        <p class="error">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ultricies.</p>
      </div>
    </li>
    <li class="item">
      <h2>Title 1</h2>
      <div>
        <select name="item-1-options" id="item-1-options">
          <option value="1">Lorem ipsum .</option>
          <option value="2">Lorem ipsum dolor sit amet</option>
          <option value="3">Lorem ipsum dolor</option>
        </select>
        <button>Select</button>
      </div>
      <div class="errors">
        <p class="error">Lorem ipsum dolor sit amet, consectetur adipiscingLorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ultricies. Lorem ipsum dolor</p>
      </div>
    </li>
  </ul>

CSS для ящиков:

.items {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.item {
  display: block;
  padding: 1em;
  margin: 1em;
  border: 1px grey solid;
  background: white;
  flex-grow: 1;
}

Answer 1

Если я прав, вам просто нужно обернуть дочерние элементы div, которые будут раскрывающимся списком и кнопкой как child 1, а сообщение об ошибке как child 2, обернуть их внутри родительского div с помощью inline-block. Установите для дочернего элемента 2 flex-grow значение 1, а width значение 0, а затем значение ta-da

.

$("#toggle-errors").on("click", function(){
	$(".errors").toggle();
});

.wrapper > div {
  border: 1px solid tomato;
}

.errors {
  display: flex;
}

.errors p {
  flex-grow: 1;
  width: 0;
}

.wrapper {
  display: inline-block;
}

.items {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.item {
  display: block;
  padding: 1em;
  margin: 1em;
  border: 1px grey solid;
  background: white;
  flex-grow: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="toggle-errors">Toggle Errors</button>
<div class="container">
  <ul class="items">
    <li class="item">
      <h2>Title 1</h2>
           <div class="wrapper">
        <div>
           <select name="item-1-options" id="item-1-options">
              <option value="1">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</option>
              <option value="2">Lorem ipsum dolor sit amet</option>
              <option value="3">Lorem ipsum dolor</option>
          </select>
          <button>Select</button>
        </div>
      
        <div class="errors">
          <p class="error">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ultricies.</p>
        </div>
    </li>
    <li class="item">
      <h2>Title 1</h2>
           <div class="wrapper">
        <div>
           <select name="item-1-options" id="item-1-options">
              <option value="1">Lorem ipsum dolor</option>
              <option value="2">Lorem ipsum dolor sit amet</option>
              <option value="3">Lorem ipsum dolor</option>
          </select>
          <button>Select</button>
        </div>
      <div class="errors">
        <p class="error">Lorem ipsum dolor sit amet, consectetur adipiscingLorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ultricies. Lorem ipsum dolor</p>
      </div>
    </li>
    <li class="item">
      <h2>Title 1</h2>
      <div>
        <select name="item-1-options" id="item-1-options">
          <option value="1">Lorem ipsum dolor sit amet, consectetur.</option>
          <option value="2">Lorem ipsum dolor sit amet</option>
          <option value="3">Lorem ipsum dolor</option>
        </select>
        <button>Select</button>
      </div>
    </li>
  </ul>
</div>