Set parents width from a specific child and break long text in sibling child

Question

I have following HTML & CSS. Notice that I can change CSS only for .parent, .main-child & .extra-child.

/* Cant change these container 1 & 2 css */
.container-1 {
  display: flex;
  flex-direction: column;
  min-width: 1px;
  max-width: 600px;
}
.container-2 {
  display: flex;
  max-width: 100%;
  box-sizing: border-box;
}

/* Following css can be changed */
.parent {
  background-color: lightblue;
}

.main-child {
  border: 1px solid red;
  color: red;
}

.extra-child {
  border: 1px solid green;
  color: green;
}

<div class="container-1">
  <div class="container-2">
    <div class="parent">
      <div class="main-child">Main child should dictate the final width</div>
      <div class="extra-child">If Extra child is very very long then it should wrap to next line</div>
    </div>
  </div>
</div>

Codepen also: https://codepen.io/dost25/pen/JjOeNQq

I want the .parent's final width should be equal to .main-child's width.

If the .extra-child is long and exceeds this width then it should break & wrap to next line. Something like this:

Set parents width from a specific child and break long text in sibling child

0 Answers0