Встроенный гибкий контейнер (display: inline-flex) расширяет всю ширину родительского контейнера

Question

У меня есть DIV с display: block (.out).

В этом DIV есть flexbox с display: inline-flex (.row) который имеет один столбец (.infos) со статической шириной 350 пикселей и другим столбцом (.dynamic) который должен иметь динамическую ширину в зависимости от содержимого.

Теперь у меня проблема в том, что внешний DIV (.row) растет на весь экран. Это не мой случай использования. Я хочу динамический внешний DIV.

Пожалуйста, проверьте мою скрипку: https://jsfiddle.net/2ymx9oog/

.out {
  border: 1px solid red;
  display: block;
  position: fixed;
  top: 0;
  left: 0;
}
.row {
  display: inline-flex;
  flex-direction: row;
  padding: 10px;
  border: 1px solid yellow;
}
.infos {
  border: 1px solid green;
  flex-basis: 350px;
}
.dynamic {
  border: 1px solid blue;
  flex: 1 1;
}

<div class="out">
  <div class="row">
    <div class="infos">
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
      sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
      rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit a
    </div>
    <div class="dynamic">
      Lorem ipsum
    </div>
  </div>

</div>

РЕДАКТИРОВАТЬ:

Теперь я осознал свою проблему: в действительности у меня есть третий div после другого div. Этот третий div должен заканчиваться вторым div, но его содержание слишком велико. Есть ли способ сделать это?

Оформите мою обновленную скрипку: https://jsfiddle.net/2ymx9oog/9/

Answer 1

Использование width: 350px вместо flex-basis: 350px,

В вашем коде .row первый размер суммирования width его содержания. поскольку .infos не имеет width его начальный размер определяется очень длинным содержимым. Так .row заполняет все доступное пространство в содержащем его блоке. Это после размера .row было определено, что изгибаемые элементы изгибаются и .infos становится 350px, Но тогда уже слишком поздно, .row уже слишком широк.

Если вы используете width: 350px, .row будет измеряться с использованием этого значения, не занимая дополнительное место.

.out {
  border: 1px solid red;
  display: block;
  position: fixed;
  top: 0;
  left: 0;
}
.row {
  display: inline-flex;
  flex-direction: row;
  padding: 10px;
  border: 1px solid yellow;
}
.infos {
  border: 1px solid green;
  width: 350px;
}
.dynamic {
  border: 1px solid blue;
  flex: 1 1;
}

<div class="out">
  <div class="row">
    <div class="infos">
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
      sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
      rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit a
    </div>
    <div class="dynamic">
      Lorem ipsum
    </div>
  </div>

</div>

Answer 2

Если я правильно понимаю, margin или же align-self следует сделать это:

• align-self https://jsfiddle.net/2ymx9oog/1/

.out {
  border: 1px solid red;
  display: block;
  position: fixed;
  top: 0;
  left: 0;
}

.row {
  display: inline-flex;
  flex-direction: row;
  padding: 10px;
  border: 1px solid yellow;
}
.infos {
  border: 1px solid green;
  flex-basis: 350px;
}
.dynamic {
  border: 1px solid blue;
  flex: 1 1;
  align-self:flex-start
}

<div class="out">
<div class="row">
    <div class="infos">
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit a
    </div>
    <div class="dynamic">
    Lorem ipsum
    </div>
  </div>
  
</div>

• margin-bottom в этом случае https://jsfiddle.net/2ymx9oog/2/

.out {
  border: 1px solid red;
  display: block;
  position: fixed;
  top: 0;
  left: 0;
}
.row {
  display: inline-flex;
  flex-direction: row;
  padding: 10px;
  border: 1px solid yellow;
}
.infos {
  border: 1px solid green;
  flex-basis: 350px;
}
.dynamic {
  border: 1px solid blue;
  flex: 1 1;
  margin-bottom: auto
}

<div class="out">
  <div class="row">
    <div class="infos">
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
      sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
      rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit a
    </div>
    <div class="dynamic">
      Lorem ipsum
    </div>
  </div>

</div>

если это тоже ширина, удалите свойство flex: https://jsfiddle.net/2ymx9oog/4/

Для обоих предыдущих примеров смотрите результаты здесь:

• margin https://jsfiddle.net/2ymx9oog/3/
• align-self https://jsfiddle.net/2ymx9oog/5/

Вы можете играть с полем или выровнять себя

пример с полем: auto без значений flex установлен https://jsfiddle.net/2ymx9oog/6/ установите динамическое поле в середине в правой области

Вы можете установить его посередине сверху, посередине посередине, посередине снизу, сверху слева, снизу слева, слева посередине и т. Д.