Ширина блока по наибольшему

164

31 января 2020, 15:20

возникла проблема с выравниванием ширины блока по наибольшему в колонке. Вот как это выглядит на данный момент:

Нужно чтобы и нижний блок был шириной с верхний.

Answer 1

Самый просто пример - обернуть эти элементы 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>

Answer 2

.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>