为什么根容器中没有max-width 子元素中的display: flex 会使根容器占据100%的宽度？答案

【问题标题】：Why without `max-width` in the root container `display: flex` in the child element makes the root container occupy 100% of the width?为什么根容器中没有max-width 子元素中的display: flex 会使根容器占据100%的宽度？
【发布时间】：2021-06-25 15:57:38
【问题描述】：

对不起，一个可能很愚蠢的问题：为什么没有根容器的max-width (document-list-item_container) display: flex 的孩子使根容器占据 100% 的宽度？并且为了避免 100% 的宽度，我是否必须在主容器中使用 max-width (document-list-item_container)？

当我在根容器 (document-list-item_container) 中使用 max-width 时，一切都很好，Flex 应用到的红色轮廓元素。

如果你从根容器中删除max-width，那么，正如我上面写的，它变成全角的，如下所示：

.v-card {
  min-width: 350px;
  border-radius: 10px !important;
  border: solid 1px #4a4a4a !important;
}

.document-item-id {
  background-color: #cccccc !important;
}

ul {
  list-style: none;
}


.document-item__list {
display:flex;
flex-wrap: wrap;
}


.document-list-item_container {}

.document-item__text-value {
  width: 50%;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/vuetify/2.5.5/vuetify.min.css" rel="stylesheet" />


<div data-app="true" class="v-application v-application--is-ltr theme--light" id="app">
  <div class="v-application--wrap">
    <main class="v-main" style="padding: 0px;" data-booted="true">
      <div class="v-main__wrap">
        <div class="container container--fluid">


          <div class="document-list-item_container mw-400">
            <div class="elevation-0 ma-2 pa-2 v-card v-sheet theme--light">
              <div class="row no-gutters">
                <div class="pa-0 col col-6">
                  <a href="#">
                    <div class="v-image v-responsive ma-0 theme--light" cover="" style="height: 210px; max-width: 160px;">
                      <div class="v-responsive__sizer" style="padding-bottom: 100%;"></div>
                      <div class="v-image__image v-image__image--cover" style="background-image: url(&quot;https://cdn.vuetifyjs.com/images/cards/halcyon.png&quot;); background-position: center center;"></div>
                      <div class="v-responsive__content" style="width: 300px;"></div>
                    </div>
                  </a>
                </div>
                <div class="text-left text-body-2 col col-6">
                  <div class="px-2 document-item-id">ID: 0</div>
                  <ul class="pa-0 document-item__list">
                    <li class="document-item__text-value">
                      lorem ipsum
                    </li>
                    <li class="document-item__text-value">

                    </li>
                    <li class="document-item__text-value">
                      lorem ipsum
                    </li>
                    <li class="document-item__text-value">

                    </li>
                    <li class="document-item__text-value">
                      lorem ipsum
                    </li>
                    <li class="document-item__text-value">
                      lorem ipsum
                    </li>

                  </ul>
                </div>
              </div>
              <div class="v-card__actions pt-12">
                <div class="text-caption text-left">
                  Folder/ <br> FileName.pdf
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</div>

代码框链接：https://codesandbox.io/s/vuetify-playground-

谢谢你，祝你有美好的一天

【问题讨论】：

您的问题主要是关于 CSS 和 HTML，尝试用最少的 CSS 和 HTML 重新创建问题，您的屏幕截图与代码 sn-p 不匹配，它没有说明问题，怀疑任何人都想进入 VueJs 来回答一个简单的 CSS 问题。

标签： html css flexbox vuetify.js

【解决方案1】：

您正在应用来自 vuetify 的样式，例如：

.col-6 {
    flex: 0 0 50%;
    max-width: 50%;
}

...并且可能在其他地方...您可以检查开发工具吗？你不应该使用它或用自定义样式覆盖。将更好地启用flex-grow: 1; 用于带有文本的右列。因此，文本将填满所有可用空间。

【讨论】：