It seems like I'm overlooking something really basic here. The reason for my current predicament may be more complex, but let's simplify things. Take a look at this straightforward template using bootstrap classes:
<div class="wrapper">
<div class="row">
<div class="col-6">
<div class="text">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Quo quia fugiat labore atque. Voluptate accusamus quod qui voluptatem nisi nulla.</div>
</div>
<div class="col-6"></div>
</div>
</div>
html {
height: 100%;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
width: 100vw;
background: #333;
}
.wrapper {
padding: 20px;
background: #fff;
}
.text {
width: 250px;
background: #000;
color: #fff;
}
[class^='col'] {
border: 3px solid red;
}
Why isn't the .col-6 with text expanding to a minimum width of 250px as stated in the CSS rule?
How can it be made to stretch as intended?
UPDATE:: In essence, when there is long text, it expands the .text element which then enlarges .col-6 accordingly. Setting an explicit width of 250px on .text enlarges that element but doesn't affect .col-6. The max-width: 50% property on col-6 limits the width in the "250px width case". But why is that happening?