0
Hello, I have a problem with making the content I have inside the div with the class "box-center" inside the div Pai "wrapper".
Someone can tell me compo I can solve the problem, I’ve tried the flex-wrapper property but still can’t solve.
The code in question is here:
.wrapper {
width: 300px;
height: 500px;
background-color: aqua;
}
.top {
display: flex;
align-items: center;
}
.number {
flex: 1 1;
font-size: 14;
font-weight: bold;
}
.box {
display: flex;
flex: 1 1;
flex-wrap: wrap;
}
.box-left {
background-color: red;
margin-right: auto;
width: 22px;
}
.box-center {
flex: 1 1;
background-color: blue;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: auto;
}
.box-right {
background-color: yellow;
margin-left: auto;
width: 22px;
}
<div class="wrapper">
<div class="top">
<div class="number">
1º
</div>
<div class="box">
<div class="box-left">
A
</div>
<div class="box-center">
Bfdfskjfkdjfjsdfjsdjfksdjfkjsdklfjdskjfdsjflkdsjlkfdsfkdsjfklsjfksfdskjsdfdsjksdjfksdjfksdjfkdsj
</div>
<div class="box-right">
C
</div>
</div>
</div>
</div>
I want to see all Divs (number, .box, .box-container, .box-right), but only a . box-container has over-flow
– Cláudio Hilário