Подтвердить что ты не робот

Установите минимальную ширину либо по содержанию, либо по 200 пикселей (в зависимости от того, что больше) вместе с максимальной шириной

Мне нужно это:

Ширина контейнера - фиксированная ширина, элементы перемещаются в направлении строки и оборачиваются в конце.

каждый элемент должен быть max-width: 400px, переполненный контент должен быть обрезан. Однако минимальная ширина элементов должна определяться содержанием: она никогда не должна быть короче, чем 200px.

Вот мой код CSS, он не охватывает аспект "минимального контента". min-content предлагается w3 в их рабочем проекте Flexbox, но в моем случае он не работает:

.container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

.container .box {
    -webkit-flex: 1;
    flex: 1;
    min-width: 200px;
    max-width: 400px;
    height: 200px;
    background-color: #fafa00;
    overflow: hidden;
}

и HTML-код:

<div class="container">
    <div class="box">
        <table>
            <tr>
                <td>Content</td>
                <td>Content</td>
                <td>Content</td>
            </tr>
        </table>    
    </div>
    <div class="box">
        <table>
            <tr>
                <td>Content</td>
            </tr>
        </table>    
    </div>
    <div class="box">
        <table>
            <tr>
                <td>Content</td>
                <td>Content</td>
            </tr>
        </table>    
    </div>
    [...]
</div>
4b9b3361

ОТВЕТЫ

Ответ 1

Проблема заключается в том, что flex: 1 устанавливает flex-basis: 0. Вместо этого вам нужно

.container .box {
  min-width: 200px;
  max-width: 400px;
  flex-basis: auto; /* default value */
  flex-grow: 1;
}


.container {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}

.container .box {
  -webkit-flex-grow: 1;
  flex-grow: 1;
  min-width: 100px;
  max-width: 400px;
  height: 200px;
  background-color: #fafa00;
  overflow: hidden;
}
<div class="container">
  <div class="box">
    <table>
      <tr>
        <td>Content</td>
        <td>Content</td>
        <td>Content</td>
      </tr>
    </table>    
  </div>
  <div class="box">
    <table>
      <tr>
        <td>Content</td>
      </tr>
    </table>    
  </div>
  <div class="box">
    <table>
      <tr>
        <td>Content</td>
        <td>Content</td>
      </tr>
    </table>    
  </div>
</div>