flexbox - Match outer divs width to the max width of inner div with CSS and flex layout

Question

How can I limit an outer element to shrink to the size of the inner one with css?

I have created a fiddle to reflect the problem I am experiencing a bit better:

https://jsfiddle.net/Holger50/4tx7smeb/

.holder {
  display: flex;
  }

.left {
  flex: 3;
  max-width: 500px;
  /*display:inline-block;*/
  }

.right {
  flex: 1;
  }

.someInnerContentWithWidth {
  width: 400px;
  }

<div class='holder'>
  <div class='left'>
    <div class='someInnerContentWithWidth'>
      Content with fixed width
    </div>
  </div>
  <div class='right'>
    This should take up the rest of the space
  </div>
 </div>

The right div should have all remaining space that is not used by the blue area (that has a fixed width)

The first box works as expected, it takes over the maximum amount of space and after it reaches max-width, the right div takes the rest. Fine so far but how can I have the outer left div to max-width the inner blue content area? The blue area cannot extent any further and needs to stay with that width.

The use of "display:inline-block;" is not working properly as the flex layout predicts the outer width. Likely there is some easy solution to it.

Answer 1

等待大神解答