CSS div彼此相邻，彼此影响宽度

Question

I have this problem that I can't seem to figure out. After researching I can't seem to find anyone that has solved it. I'm not sure that it can be solved in pure CSS, but I have to ask:

Consider a situation where there are two divs next to each other. The divs have a known width.

The size of the content, however, is not known. When the content of one div becomes very large, that div should take space from the other, as such:

This width should only grow if the known width can't accommodate the content. Likewise, the blue div should grow if its content is very large:

Is this possible to solve with only CSS, or would I need JS?

Answer 1

flexbox and min-width can do that:

 .wrap { width: 50%; margin: 1em auto; border: 1px solid grey; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } .wrap div { flex: 1 0 auto; max-width: 70%; } .left { background: rgba(255, 0, 0, 0.5); min-width: 30%; } .right { background: rgba(0, 0, 255, 0.5); min-width: 30%; } 

 <div class="wrap"> <div class="left">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur quas incidunt dolorem doloribus asperiores, iure esse voluptatibus dolore cum sint exercitationem minus aspernatur explicabo perspiciatis distinctio expedita.</div> <div class="right"></div> </div> <div class="wrap"> <div class="left"></div> <div class="right">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, accusantium libero omnis, quod ea pariatur porro asperiores enim officia minima!</div> </div> 

Answer 2

if you set a fixed size to div, content will flow in multiple lines instead of div expanding to fit the content. Instead you need to set minimum width to the div then it can expand, but you will have to set max-width that it can occupy as well so that it wont take full space pushing the second div away.