I've successfully used Flex multiple times in the past, but for some reason, I'm encountering an issue now. I isolated the problematic code in a separate HTML file, yet the problem persists. In my layout, I have a container div with an aside and section inside it. The container is set to display: flex with a row direction. The aside has a width of 250px, and the section is supposed to be flexible. Everything works as intended until I add some text data within the section.
Strangely, when I insert sentences into the section, the fixed-width aside suddenly shrinks.
div {
width: 100%;
min-height: 200px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
}
aside {
position: relative;
width: 250px;
background-color: aqua;
}
section {
position: relative;
background-color: brown;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}<body>
<div>
<aside>
<p>Some random data in a 250px wide div </p>
</aside>
<section>
<p>
To contribute to the reduction of the supply of controlled substances coming in to Orkney by the provision of a trained drugs dog or dogs. Helping to prevent access to harmful substances for the health benefit of the people of Orkney and neighbouring
local authority areas.
</p>
<p>
To work in partnership to increase public knowledge and to educate the community as to the extent of drug misuse, its damaging effects on individuals, families, society in general and the economy.
</p>
</section>
</div>
</body>Any assistance would be greatly appreciated!