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

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

В этом DIV есть flexbox с display: inline-flex (.row), который имеет один столбец (.infos), который имеет статическую ширину 350px, а другой столбец (.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>

Ответы

Ответ 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>

Ответ 2

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

.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>