Как сделать так чтобы блок расширялся при добавлении содержимого
@font-face {
font-family: 'Comfortaa300';
src: url('../../assets/Comfortaa300.ttf');
}
.items {
position: relative;
display: grid;
grid-template-columns: repeat(7, 1fr);
grid-gap: 2px;
background-color: #404040;
}
.item {
cursor: pointer;
display: block;
position: relative;
margin: 0 auto;
background-color: #1E1F21;
text-align: right;
padding: 10px;
border-radius: 3px;
color: #DDDCDD;
align-items: center;
width: 140px;
min-height: 70px;
}
.weekend {
background-color: #282a2b;
}
.currentDay {
border: none;
height: 100%;
width: 100%;
border-radius: 10%;
background-color: rgb(255, 0, 0);
font-weight: bold;
color: #1E1F21;
box-shadow: 1px 1px 10px 1px rgb(255, 0, 0);
}
.event {
display: flex;
flex-direction: column;
margin: unset;
margin-bottom: 2px;
font-size: 13px;
list-style-type: none;
text-align: left;
list-style-position: inside;
}
.ev_btn {
font-family: 'Comfortaa300';
text-align: left;
cursor: pointer;
position: relative;
left: -42px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
width: 114px;
border: unset;
background: unset;
color: #DDDDDD;
margin: 0;
padding: 0;
text-align: left;
top: -5px;
}
item - Сам блок который нужно расширять содержимым. event, event_btn - это список кнопок и кнопки которые нужно добавлять в блок
Ответы (1 шт):
Автор решения: Sabrina Spellman
→ Ссылка
Попробуй использовать width: fit-content; (для height тоже самое). Не ручаюсь, что сработает, CSS сам себе на уме, так что пробуй все, пока не получится.