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

Question

У меня есть контейнер flexbox с ровно двумя дочерними элементами, каждый из которых может иметь переменное содержимое.Я хочу, чтобы ширина всего контейнера соответствовала ширине первого дочернего элемента, но я хочу, чтобы содержимое второго дочернего элемента было перенесено, а не заставило контейнер расти горизонтально.Смотрите приведенный ниже фрагмент кода для визуального описания проблемы.

В настоящее время ищем решение CSS Grid.Я нашел одно частичное решение, но полагаюсь на JavaScript: сделайте второго дочернего элемента относительным контейнером, поместите его содержимое в промежуточный абсолютно позиционированный контейнер и используйте JS для установки фиксированной высоты.По крайней мере, это хорошо для показа того, что я ищу.

Проблема:

.container {
  display: inline-flex;
  flex-direction: column;
  border: 1px solid red;
}

.child {
  background-color: wheat;
  margin: 5px;
}

<div class="container">
  <div class="first child">
    This content can grow and be as wide as it wants
  </div>
  <div class="second child">
    This content will also be any size it wants, but I * want it to wrap at the asterisk in this sentence, which is where the first child above would naturally end. This will be its own flexbox container holding several buttons that should wrap onto new rows.
  </div>
</div>

JavaScript / абсолютное решение:

let second = document.getElementsByClassName('second')[0]
let content = document.getElementsByClassName('absolute')[0]

second.style.height = content.offsetHeight + 'px'

.container {
  display: inline-flex;
  flex-direction: column;
  border: 1px solid red;
}

.child {
  background-color: wheat;
  margin: 5px;
}

.second {
  position: relative;
  /* height to be set by JS */
}

.absolute {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
}

<div class="container">
  <div class="first child">
    This content can grow and be as wide as it wants
  </div>
  <div class="second child">
    <div class="absolute">
      This content is longer than the above but still wraps in the right place.
    </div>
  </div>
</div>

Answer 1

Просто установите min-width и width из .second:

.container {
  border: 1px solid red;
  display: inline-block;
  padding: 5px;
}

.child {
  background-color: wheat;
}

.second {
  margin-top: 10px;
  min-width: 100%;
  width: 0;
}

<div class="container">
  <div class="first child">
    This content can grow and be as wide as it wants
  </div>
  <div class="second child">
    This content will also be any size it wants, but I * want it to wrap at the asterisk in this sentence, which is where the first child above would naturally end. This will be its own flexbox container holding several buttons that should wrap onto new rows.
  </div>
</div>