Сжать элемент , чтобы он поместился во вложенный flexbox

#css #drop-down-menu #flexbox

#css #выпадающее меню #гибкий ящик

Вопрос:

Я пытаюсь уменьшить некоторые <select> элементы, чтобы они помещались горизонтально внутри вертикального flexbox, с оболочкой вокруг каждого из них. В случае приведенного ниже примера я бы хотел, чтобы красное поле никогда не выходило за пределы элемента выбора (выпадающий список), но элемент выбора должен уменьшаться, чтобы соответствовать размеру.

Две возможности, которые я попробовал, приведены ниже: в случае 1 контейнер ведет себя правильно в небольших масштабах (поле выбора сжимается), а в случае 2 красное поле ведет себя правильно в широких масштабах (красное поле не становится слишком широким). Есть ли способ объединить эти модели поведения?

 div, label {
  border: 1px solid black;
  margin: 1px;
  padding: 1px;
}

.container {
  display: flex;
  flex-direction: column;
  resize: horizontal;
  overflow: hidden;
  width: 400px;
  min-width: 90px;
}

label {
  display: flex;
  min-width: 0;
  flex-direction: row;
  border-color: red;
}

.align-stretch { align-self: stretch }

.align-start { align-self: flex-start }

select {
  text-overflow: ellipsis;
  min-width: 0;
  margin: 2px;
}

 <div class="container">
  <p>Resize this box</p>
  <label class="align-stretch">
    C1:
    <select>
      <option>This one is stretchy</option>
    </select>
  </label>
  <label class="align-start">
    C2:
    <select>
      <option>This is start-aligned</option>
    </select>
  </label>
</div>

1. Случай 1 отлично работает для меня как при расширении, так и при втягивании в Chrome. Какие браузеры вы используете?

2. @ObsidianAge Я использую Firefox

3. @ObsidianAge вот что я вижу: imgur.com/a/KMHTgrV

Ответ №1:

Обновленное решение (исправлена проблема с заполнением родительского элемента):

Используйте max-width: max-content; и сохраняйте режим растяжения

 div,
label {
  border: 1px solid black;
  margin: 1px;
  padding: 1px;
}

.container {
  display: flex;
  flex-direction: column;
  resize: horizontal;
  overflow: hidden;
  width: 400px;
  min-width: 90px;
}

label {
  display: flex;
  min-width: 0;
  flex-direction: row;
  border-color: red;
  box-sizing: border-box;
}

.align-stretch {
  align-self: stretch;
  max-width: max-content;
}

select {
  text-overflow: ellipsis;
  min-width: 0;
  margin: 2px;
}

 <div class="container">
  <p>Resize this box</p>
  <label class="align-stretch">
    C2:
    <select>
      <option>This one is stretchy</option>
    </select>
  </label>
</div>

Оригинальное решение: добавить max-width: 100% к flex-start делу. Обратите внимание, что при этом не учитывается заполнение родительского элемента.

Показать фрагмент кода

 div, label {
  border: 1px solid black;
  margin: 1px;
  padding: 1px;
}

.container {
  display: flex;
  flex-direction: column;
  resize: horizontal;
  overflow: hidden;
  width: 400px;
  min-width: 90px;
}

label {
  display: flex;
  min-width: 0;
  flex-direction: row;
  border-color: red;
  box-sizing:border-box;
}

.align-stretch { align-self: stretch }

.align-start { align-self: flex-start; max-width:100%; }

select {
  text-overflow: ellipsis;
  min-width: 0;
  margin: 2px;
}

 <div class="container">
  <p>Resize this box</p>
  <label class="align-stretch">
    C1:
    <select>
      <option>This one is stretchy</option>
    </select>
  </label>
  <label class="align-start">
    C2:
    <select>
      <option>This is start-aligned</option>
    </select>
  </label>
</div>

1. Привет, Темани, спасибо за ответ. К сожалению, при этом не учитывается заполнение родительского элемента, поэтому красное поле слишком близко к родительскому. Возможно ли это учесть, не зная значения заполнения в пикселях и не вычитая его?

2. @CharlieHarding обновил код, вам нужно добавить box-sizing:border-box

3. @CharlieHarding добавил еще одну идею

4. Спасибо, Темани, max-width: max-content это решило это для меня и заставило меня принять это 🙂

5. Из интереса, знаете ли вы, как бы я выровнял по правому краю красную рамку, когда она будет достаточно широкой? margin-left: auto отменяет align-self: stretch