Long line bursting container with min-width?

Question

css

I have a container for which min-width is specified, but width is not specified.
Inside it, the breadcrumbs line comes first, followed by the main content block.

<div class="wrapper">
  <ul class="breadcrumbs">
    <li>one</li>
    <li>two</li>
    <li>three</li>
    <li>lorem ipsum dolor sit amet</li>
    <li>lorem ipsum dolor sit amet</li>
  </ul>
  <div class="content"></div>
</div>

body { text-align: center; }
.wrapper { display: inline-block; min-width: 400px; text-align: left; border: 1px solid #000; }
.breadcrumbs { background-color: #ddd; list-style: none; margin: 0; padding: 0; }
.breadcrumbs > li { display: inline; }
.breadcrumbs > li:before { content: ' > '; }
.breadcrumbs > li:first-child:before { content: ''; }
.content { width: 400px; height: 100px; background: #aaa; }
.content1 { width: 500px; }

If the chain of breadcrumbs turns out to be long, then instead of being transferred, it begins to burst the container.
The width of the .content block is set from the admin panel and it has the right to expand the container. But breadcrumbs should not burst, but should be transferred if necessary.
Here is a good example .
The task seems to be easy, but I'm confused. I can't win...
I know it could be solved in a couple of lines of javascript, but I would like to get by with a clean layout.

Answer 1

You can move .breadcrumbs inside a .content block.
Then .breadcrumbs will have a width no greater than .content, and if this width is exceeded, the content of .breadcrumbs will wrap to the next line. Is that what you meant?!
Now you are trying to make the .wrapper block expandable by the .content block, but not expandable by the .breadcrumbs block.

Answer 2

Move the block .breadcrumbsout of the block .wrapperand hardcode it ( .breadcrumbs) to the desired width.