I"d like to ask you a question about the two-column layout.
HTML:
<div class="container">
<div class="left">12.23%</div>
<div class="right"></div>
</div>CSS:
.container {
display: flex;
width: 200px;
border:1px solid black;
height: 20px;
line-height: 20px;
}
.left {
width: 20%;
margin-right:20px;
}
.right {
flex: 1;
background-color: pink;
} is shown as follows:
my requirement is that the width of the container is not fixed, but the UI ensures that the percentage on the left is fully displayed and does not overlap with the pink area on the right. The width of the pink area is the width of the container minus the width of the percentage number. The code I wrote above will go wrong when the width of the container is small, and the numbers will be covered directly. Is there any good solution?