CSS divs рядом друг с другом, которые влияют друг на друга.

Question

У меня есть эта проблема, которую я не могу понять. После исследования я не могу найти никого, кто бы его разрешил. Я не уверен, что это можно решить в чистом CSS, но я должен спросить:

Рассмотрите ситуацию, когда есть два div друг рядом с другом. У divs есть известная ширина.

Размер контента, однако, неизвестен. Когда содержание одного div становится очень большим, этот div должен занимать пространство от другого, как таковое:

Эта ширина должна расти только в том случае, если известная ширина не может разместить содержимое. Кроме того, синий ДИВ должен расти, если его содержание очень велико:

ли это можно решить только с помощью CSS, или мне нужно JS?

Answer 1

Если вы установили фиксированный размер в div, контент будет течь в нескольких строках вместо расширения div, чтобы он соответствовал содержимому. Вместо этого вам нужно установить минимальную ширину в div, затем она может расширяться, но вам нужно будет установить максимальную ширину, чтобы она могла занимать так, чтобы она не занимала полное пространство, оттесняя второй div.

Answer 2

flexbox и min-width можно сделать:

.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>