Как сделать так, чтобы ширина контейнера зависела от ширины конкретного дочернего элемента?

Question

У меня есть div контейнер с несколькими дочерними элементами (также div с).Мне нужно, чтобы нижний дочерний элемент был такой же ширины, как текст внутри него.Родительский контейнер и другие дочерние элементы должны иметь точно такую ​​же ширину, что и нижний дочерний элемент, т.е. нижний дочерний элемент определяет ширину всего.Как мне этого добиться?

Я подозревал, что flexbox может помочь, но я не смог найти ничего связанного с документацией.Можно ли вообще сделать это на чистом CSS или мне для этого нужно использовать JavaScript?

Вот скрипка , которая демонстрирует проблему.

<div class="parent">
  <div class="slave">Child that shouldn't dictate the width to anybody at all even though it's long</div>
  <br>
  <div class="master">Child that dictates the width to the parent and siblings</div>
</div>

Чтоон делает:

Что бы я хотел (многоточие ненужно, хорошо, если оно просто обрезается):

Answer 1

Оберните текст раба div и поместите его в абсолют.Чтобы добавить точки дерева, когда текст слишком длинный, примените text-overflow: ellipsis.

.parent {
  background-color: green;
  display: inline-block;
}

.slave {
  background-color: blue;
  color: red;
  width: auto;
  height: 40px;
  position: relative;
}

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

  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.master {
  background-color: red;
  color: black;
  width: auto;
  height: 40px;
}

<div class="parent">
  <div class="slave">
    <div>Child that shouldn't dictate the width to anybody at all even though it's long</div>
  </div>
  <br>
  <div class="master">Child that dictates the width to the parent and siblings</div>
</div>


<div class="parent">
  <div class="slave">
    <div>Two words</div>
  </div>
  <br>
  <div class="master">Child that dictates the width to the parent and siblings</div>
</div>

Answer 2

div {
  white-space: nowrap; 
  overflow: hidden;
  text-overflow: ellipsis;
}

Надеюсь, что это решение вашей проблемы