콘텐츠 또는 최대 너비와 함께 200px (둘 중 더 큰 값)별로 최소 너비를 설정합니다.

콘텐츠 또는 최대 너비와 함께 200px (둘 중 더 큰 값)별로 최소 너비를 설정합니다.

---

나는 이것이 필요합니다 :

컨테이너 너비는 고정 너비이며 항목은 행 방향으로 흐르고 끝은 래핑됩니다.

각 항목은이어야하며 max-width: 400px, 넘쳐나는 내용은 잘라야합니다. 항목의 최소 너비는 콘텐츠에 따라 결정되어야하지만 이보다 짧으면 안됩니다 200px.

내 CSS 코드는 "최소 내용"측면을 다루지 않습니다. min-content는 Flexbox 작업 초안에서 w3에 의해 제안되었지만 제 경우에는 작동하지 않는 것 같습니다.

.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>

---

문제는 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>

참고 URL : https://stackoverflow.com/questions/29289071/set-min-width- either-by-content-or-200px-whichever-is-greater-together-with-ma