I have the code listed below. This works perfectly fine as long as the text fits in the box. As soon as the text exceeds, instead of keeping the box a fixed size (as per the CSS grid columns), it changes the fraction unit, increasing the box size.
Is there any way to change this and make the fraction unit change?
In this example before I start is the text that fits in the field. Once I refresh the page (when it changes), that is the text that doesn't fit in the field and therefore should be cut off at the end rather than changing the size of the box's and messing up the whole layout.
Many thanks, code listed below - it isn't that pretty with it here as most has been left out, just included the relevant bits.
.guild{
margin-bottom:2%;
height:12%;
width:98%;
background-color:red;
border-radius:14px;
display:grid;
grid-template-columns: 0.05fr 1.5fr 5fr 2.5fr 0.2fr 2.8fr 2.8fr 0.2fr;
grid-gap: 0.5%;
}
/* Code for column 2, 4, 6, 7 left out */
/* Colours Changed so you can clearly see. */
.guild_name_holder{
grid-column: 3;
margin-left:2.5%;
display:flex;
flex-direction: column;
justify-content: center;
}
.guild_name_tag{
font-family: "Montserrat";
font-size: 0.7vw;
font-weight: 550;
overflow: hidden;
color: black;
}
.guild_name_box{
background-color: white;
margin-top:2%;
height:35%;
width:100%;
border-radius:4px;
display:flex;
flex-direction: column;
justify-content: center;
}
.guild_name_box span{
font-family: "Montserrat";
font-size: 0.7vw;
font-weight: 400;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: black;
margin-left:3%;
margin-right:3%;
}<div class="guild">
<div class="guild_pfp_holder">
<div class="guild_pfp"></div>
</div>
<div class="guild_name_holder">
<div class="guild_name_tag">Guild Name</div>
<div class="guild_name_box">
<span>Test Text</span>
</div>
</div>
<!--- Code Left Out-->
</div>Resolved from a previous answer that has been deleted - set width in rem rather than %.