Как сделать все элементы в div одинаковой ширины без переноса текста?

Question

Я пытаюсь создать ряд из трех кнопок, где все кнопки имеют одинаковую ширину. Если ширина экрана становится меньше, кнопки должны уменьшаться до размеров экрана. Как только текст начинает наматываться на любую из кнопок, я хочу изменить ориентацию кнопок с горизонтальной на вертикальную.

Я попытался добиться этого с помощью flex box.

Вот что у меня пока что:

button {
background: black;
font-size: 1.2em;
width: 32%;
color: white;
padding-top: 11px;
padding-bottom: 11px;
padding-left: 20px;
   padding-right: 20px;
border-radius: 100px;
min-width: min-content;
white-space: nowrap; 
flex-shrink: 0;
flex-grow: 1;
flex-basis: 0;
text-align: center;
}

.btn-containter{
  display: flex;
  align-items: stretch;
  align-content: stretch;
  flex-direction: row;
  flex-wrap: wrap;
}



<div class="btn-container">
  <button onclick=test  type="button">button with long text</button>
  <button onclick=test  type="button">button with really really long text</button>
  <button onclick=test  type="button">button with text</button>
</div>

Answer 1

вы неправильно написали имя класса .btn-container. Затем измените flex-direction на столбец и удалите align-items:stretch и justify-content:stretch.

Затем удалите кнопку width:32%.

проверьте это сейчас, он отлично работает

button {
background: black;
font-size: 1.2em;
color: white;
padding-top: 11px;
padding-bottom: 11px;
padding-left: 20px;
   padding-right: 20px;
border-radius: 100px;
min-width: min-content;
white-space: nowrap; 
flex-shrink: 0;
flex-grow: 1;
flex-basis: 0;
text-align: center;
}

.btn-container{
  display: flex;
  flex-direction: column;
}

<div class="btn-container">
  <button onclick=test  type="button">button with long text</button>
  <button onclick=test  type="button">button with really really long text</button>
  <button onclick=test  type="button">button with text</button>
</div>

Answer 2

JavaScript - это , а не , необходимое для этого. Вы должны использовать @ media и более современный grid для достижения этой цели.

button {
background: black;

width: 100%;

font-size: 20px;
color: white;
text-align: center;

padding-top: 11px;
padding-bottom: 11px;
padding-left: 20px;
padding-right: 20px;

border-radius: 100px;

white-space: nowrap;
}

.btn-container {
  display: grid;
  grid-template-areas: "button1 button2 button3";
  width: 100vw;
}

@media only screen and (max-width: 750px) {
   .btn-container {
      grid-template-areas: "button1"
                  "button2"
                  "button3";
   }
}

<div class="btn-container">
  <button onclick=test style="grid-area: button1" type="button">button with long text</button>
  <button onclick=test style="grid-area: button2" type="button">button with really really long text</button>
  <button onclick=test style="grid-area: button3" type="button">button with text</button>
</div>