Как правильно задать ширину flex элементу?

Question

[Lolka21]

вопрос, почему не действует max-width для flex элемента ?
пример тут: https://codepen.io/g3nnadie/pen/jOyaLdo

почему для form__field не задается max-width ?
и как правильно задать ширину для flex элемента, на старнице много таких элементов...

сам код:

<div class="container">

  <div class="box">
    <div class="logo">
      <a href="index.html"><img src="#" alt="Логотип"></a>
    </div>
    <form action="#" class="form search">
      <label class="form__field search__input"><input type="text" placeholder="Поиск" /></label>
      <label class="form__field search__select">
        <select>
          <option>Селект</option>
          <option>Селект 1</option>
          <option>Селект 2</option>
        </select>
      </label>
    </form>
  </div>

  <a href="#" class="user">
    <p class="user__name">Сергей Попкин</p>
  </a>

</div>

Comments

[Ankhena]

Почему вы считаете, что не задается max-width?
Вы задали для search__input max-width: 290px;
При достаточно большой ширине окна (когда ничего никуда не наползает), его ширина получается 127.
Это укладывается в max-width.

Думаю, что хотите вы совсем не того, о чём спрашиваете.

Вы пишете

.form__field, .form__field input, .form__field select {
    width: 100%;
    display: block;
}

и просите задать 100% ширины родителя, но ширина родителя в вашей песочнице определяется его содержимым.
Сами представьте себя браузером и подумайте, что бы стали делать.
Чтобы понять что у вас происходит я всегда рекомендую обводить элементы рамочками (border, outline) или фон.
Обычно после этого становится понятно, что разбираться нужно не с тем элементом, который вы озвучиваете в вопросе, а с его родителем или еще более дальними предками.

И почитайте про flex-grow и flex-shrink.

[Lolka21]

то есть нужно задать ширину родителю ?

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

[Ankhena]

Lolka21, тогда не задавайте ширину ни родителям ни детям, используйте отступы и, при необходимости, white-space
Сейчас вы пытаетесь сделать родителя по детям, а детей по родителю.

Answer 1

[iBird Rose]

чего именно ты хочешь добиться в итоге?
для flex для этих целей есть https://developer.mozilla.org/ru/docs/Web/CSS/flex...
НО и в этом случае ты не увидишь 290px и 150px. потому что их ограничивает родительский элемент .form.search который.
задай к примеру для .form.search {width: 600px;} и с flex-basis будет работать

Comments

[Lolka21]

нужно что бы родительская ширина зависела от дочернего элемента... кол-во элементов может меняться, делать фиксированную ширину у родителя, я думаю это не нормально...

[iBird Rose]

Lolka21, ну тогда используй не max-width, а width у дочерних