Set div to have its siblings width

Answer 1

Here's another Flexbox solution which allows for the second child to wrap to match the width of the variable height sibling.

.wrapper > div {
  border: 1px solid;
}

.child {
  display: flex;
}

.child div {
  flex-grow: 1;
  width: 0;
}

.wrapper {
  display: inline-block;
}

<div class="wrapper">
    <div>This div is dynamically sized based on its content</div>
    <div class="child"><div>This div will always be the same width as the preceding div, even if its content is longer (or shorter too).</div></div>
</div>

Edit:

To support multiple divs under .child, where each div is on its own line, add break-after: always; ...

.child div {
  flex-grow: 1;
  width: 0;
  break-after: always;
}

Answer 2

Set your div to display:inline-block instead, this way your div will expand with the content inside of it.

http://jsfiddle.net/CpKDX/

Answer 3

2020 keep it simple...

Use grid and the fractional unit? Then you can split up into as many equally sized rows or columns as you want:

.container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: 1em;
}

.container > div {
  border: 1px solid black;
  padding: 0.5em;
}

<div class="container">
  <div>I'm a part of a grid. I will be split up into equal parts with my other sibling(s) depending on how many columns the grid is given.</div>
  <div>I am a sibling element.</div>
</div>

Answer 4

UPDATE: This works with me, I've just tried it:

<div style="max-width:980px;border:1px solid red;">
   <div style="background:#EEE;float:left;">
     <div style="width:auto;border:1px solid blue;float:left;">If you use 100% here, it will fit to the width of the mother div automatically.</div>
     <div style="border:1px solid green;"> The div will be 100% of the mother div too.</div>
   </div>
     <div style="clear:both;"></div>
</div>

Is this what you want? The borders and background are just to show the divs ;)

---

Just go like this:

Let's say you want the whole divs be max. 980px (otherwise just leave that out or replace with 100%)...

<div style="max-width:980px;">
     <div style="width:100%;">If you use 100% here, it will fit to the width of the mother div automatically.
     </div>
     <div style="width:100%;"> The div will be 100% of the mother div too.
     </div>
</div>

The second option would be, to use one more div... or you use style="width:auto;" for the dynamic div...

Answer 5

If your willing to give up on a couple of <div>s then I have the solution for you:

<div style=“display: inline-block;”>
<table>
<tr>
<td>The table automatically makes its siblings the same width</td>
</tr>
<tr>
<td>So this will be as wide</td>
</tr>
</table>
</div>

Remember to set the div display:inline-block;

Answer 6

Here is still a flexbox-based approach.

The essential idea: in an outermost wrapper, elements that need to be of equal width are wrapped into another wrapper.

.wrapper {
  display: inline-block;
}

.flex-wrapper {
  display: flex;
  flex-direction: column;
}

.demo-bar {
  height: 4px;
  background-color: deepskyblue;
}

<div class="wrapper">
  <div class="flex-wrapper">
    <div contenteditable>Some editable text.</div>
    <div class="demo-bar"></div>
  </div>
</div>

Another practical example: an adaptive progress bar with the same width below a media (video or audio) element.

video.addEventListener("timeupdate", () =>
  progress.style.width = `${video.currentTime / video.duration * 100}%`
)

.wrapper {
  display: flex;
  flex-direction: column;
  position: relative;
  align-items: center;
}

video {
  display: block;
  max-width: 100%;
}

.progress-bar {
  height: 0.25rem;
  background: #555;
}

#progress {
  width: 0%;
  height: 100%;
  background-color: #595;
}

<div class="wrapper">
  <div data-css-role="wrapper">
    <video id="video" controls>
      <source src="https://interactive-examples.mdn.mozilla.net/media/examples/flower.webm">
    </video>
    <div class="progress-bar">
      <div id="progress"></div>
    </div>
  </div>
</div>