CSS: Pu sh гибкий контейнерный элемент в следующую строку при переполнении

Question

У меня есть гибкая строка с 2 делителями (.box-1 and .box-1), в обоих содержится некоторое содержимое. Я хотел бы, чтобы они оба оставались в одной строке, пока содержимое в .box-1 не станет достаточно длинным, чтобы вывести sh .box-2 на следующую строку.

.box-2

• Должна иметь фиксированную ширину при размере экрана рабочего стола.
• На планшете должна быть ширина 50%.
• На мобильном телефоне должна быть полная ширина.

Прямо сейчас, как вы можете видеть из фрагмента ниже, содержимое в .box-2 переполнится, но останется в той же строке. Я хочу, чтобы .box-2 выводился на отдельную строку при переполнении контента . ИЛИ минимальная ширина .box-2 должна быть достаточно широкой, чтобы всегда держать содержимое моей коробки.

ПРИМЕЧАНИЕ. Одна проблема, с которой я столкнулся при использовании класса col-lg-3, заключается в том, что иногда она становится слишком маленькой для содержимого моего .box-2.

Я пытаюсь использовать css gird и придерживаться bootstrap классов для этого. Стараясь как можно больше избегать индивидуального стиля. Класс .wrappable ниже является стандартом в библиотеке, которую я использую, поэтому не может быть изменен.

.container {
  max-width: 300px; 
}

.wrappable {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: center;
    align-items: center;
      margin-right: -0.625rem;
    margin-bottom: -0.625rem;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
<div class="wrappable">
  <div class="box-1 wrappable-flex border rounded item-1">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, incididunt  ut labore et 
  </div>
  <div class="box-2 col-sm-12 col-md-6 col-lg-3 border rounded text-nowrap">
  some other text I want to put in the same row 
  </div>
</div>
</div>

Answer 1

Я пытался использовать только классы bootstrap, и в моем случае помогло небольшое изменение классов ширины.

Итак, я сменил col-lg-3 на col-lg-auto. Довольно просто задним числом. Нашел информацию об этом с сайта bootstrap .

.container {
  max-width: 300px; 
}

.wrappable {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: center;
    align-items: center;
      margin-right: -0.625rem;
    margin-bottom: -0.625rem;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
<div class="wrappable">
  <div class="box-1 wrappable-flex border rounded item-1">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, incididunt  ut labore et 
  </div>
  <div class="box-2 col-sm-12 col-md-6 col-lg-auto border rounded text-nowrap">
  some other text I want to put in the same row 
  </div>
</div>
</div>

Answer 2

Вы можете добавить к .box-2 min-width: fit-content;

.container {
  max-width: 300px; 
}

.wrappable {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: center;
    align-items: center;
      margin-right: -0.625rem;
    margin-bottom: -0.625rem;
}

.box-2 {
  min-width: fit-content;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
<div class="wrappable">
  <div class="box-1 wrappable-flex border rounded item-1">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, incididunt  ut labore et 
  </div>
  <div class="box-2 col-sm-12 col-md-6 col-lg-3 border rounded text-nowrap">
  some other text I want to put in the same row 
  </div>
</div>
</div>