, Это означает, что размер элементов зависит от длины их содержимого.

хотел, чтобы первый и последний элементы имели одинаковую ширину. Как это сделать?

main {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

input {
  width: 200px;
}
<main>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
  <div>
    <input type="text">
  </div>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
  </div>
</main>

JSFiddle:https://jsfiddle.net/7nz07sqn/9/

Ответы на вопрос(2)

Решение Вопроса

flex: 0 0 auto ксредний div (чтобы он занимал столько же ширины, сколько его содержимое), иflex: 1 для двух других делений (добавлениеborders для иллюстрации)

Обратите внимание, что это решениепредполагает средний див имеет фиксированную ширину (вы далиinput фиксированныйwidth) - см. демо ниже:

main {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

input {
  width: 200px;
}
main > div {
  border: 1px solid;
}
main div:first-child, main div:last-child {
  flex: 1;
}

main div:nth-child(2) {
  flex: 0 0 auto;
}
<main>

  <div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  </div>
  <div>
    <input type="text">
  </div>
  <div>

    Lorem ipsum dolor sit amet, consectetur adipisicing elit,

  </div>
</main>

 Andrea Anfuso14 сент. 2017 г., 11:54
Работает хорошо, спасибо!

просто дайте имflex: 1.

main {
  display: flex;
}

input {
  width: 200px;
}

main > div:first-child,
main > div:last-child {
  flex: 1;
}
<main>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non pr,oident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
  <div>
    <input type="text">
  </div>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
  </div>
</main>

Это говорит о том, что первый и последний элементы потребляют равное распределение свободного пространства в контейнере.

Поскольку средний div (с вводом) занимает 200px ширины, братья и сестры сflex: 1 разделить оставшееся пространство (100% - 200 пикселей).

flex: 1 правило является сокращением дляflex: 1 1 0, который разбивается на:

flex-grow: 1flex-shrink: 1flex-basis: 0

Первый и последний элементы div не были равны ширине для начала, потому что начальная настройка дляflex-basis являетсяauto, Это означает, что размер элементов зависит от длины их содержимого.

Ваш ответ на вопрос