возникла проблема с выравниванием ширины блока по наибольшему в колонке. Вот как это выглядит на данный момент:
Нужно чтобы и нижний блок был шириной с верхний.
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуСамый просто пример - обернуть эти элементы div
ом и задать им (этим элементам) width: 100%
- тогда они будут шириной с родителя.
.width {
display: inline-block;
width: auto;
}
.elem {
display: block;
width: 100%;
padding: 10px;
margin-bottom: 10px;
border-radius: 50px;
background: blue;
color: #fff;
box-sizing: border-box;
}
<div class="width">
<div class="elem">asdasdasdasdasdasdasdasdasdasdasdasd</div>
<div class="elem">asdasdasdasd</div>
</div>
Дополнил
.width {
display: inline-block;
width: auto;
}
.elem {
display: block;
width: 100%;
padding: 10px;
margin-bottom: 10px;
border-radius: 50px;
text-align: left;
background: blue;
color: #fff;
box-sizing: border-box;
}
<div class="width">
<button class="elem">asdasdasdasdasdasdasdasdasdasdasdasd</button>
<button class="elem">asdasdasdasd</button>
</div>
<button>
вместо <div>
и всё работает.
.flex {
display: inline-flex;
flex-direction: column;
max-width: 400px;
}
.block {
padding: 5px;
margin-bottom: 10px;
border-radius: 20px;
background: yellow;
color: #222;
box-sizing: border-box;
word-break: break-all;
}
Пример 1:<br><br>
<div class="flex">
<div class="block">Привет Мир, Я Супер!</div>
<div class="block">Привет!</div>
</div>
<br><br>
Пример 2 (с добавленным третьим блоком)<br><br>
<div class="flex">
<div class="block">Привет Мир, Я Супер!</div>
<div class="block">Привет!</div>
<div class="block">Я Супер человек! Супер человек!</div>
</div>