1

I have two blocks placed in one inline-block.

I want the first block ("A") to expand the parent inline-block. I want the second block ("B") to have the same width as the A block.

I'm sure there is a super obvious way of achieving this...

This piece of code works exactly like I want, in Firefox, Chrome, Safari, IE11... but NOT Edge 18. In Edge, the B div will expand the parent div just like the A div does.

<div style="display: inline-block;">
    <div style="background: green;">
        A: I want this content to expand the parent div.
    </div>
    <div style="background: yellow; display: flex">
        <div style="width: 10px; flex-grow: 1;">
            B: I want this div to have the same width as A. 
        </div>
    </div>
</div>
Ömürcan Cengiz
  • 2,085
  • 3
  • 22
  • 28
JanErikGunnar
  • 211
  • 1
  • 7
  • 1
    no need flexbox, consider the trick here: https://stackoverflow.com/a/55041133/8620333 ... add `width:0;min-width:100%` to B and remove the other styles – Temani Afif Oct 28 '19 at 22:06

0 Answers0