Css 为什么 width： 100% 在 Flex 父级中缩小这个 div

发布于07月13日

与其说我在寻找解决方案，不如说我在努力解决正在发生的事情.

在下面的代码中，我有一个支持flex的div，它有两个子元素.

我显式地将其第一个子级的宽度设置为18rem.
我将第二个子元素的宽度设置为100%.

.flex {
  display: flex;
}

.w-72 {
  width: 18rem;
}

.w-full {
  width: 100%;
}

.bg-blue-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(147 197 253 / var(--tw-bg-opacity));
}

.bg-orange-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 215 170 / var(--tw-bg-opacity));
}

<div class="flex">
  <nav class="bg-blue-300 w-72">Nav</nav>
  <article class="w-full bg-orange-200">Article</article>
</div>

这将扩展<article>以填充剩余的水平宽度，但它实际上会导致相邻<nav>的宽度缩小.(试着在使用和不使用w-full的情况下运行此代码，亲自查看一下.)

这一切为什么要发生？

推荐答案

弹性容器上的默认设置为flex-shrink: 1.这意味着弹性项将自动收缩以避免容器溢出.

要强制弹性项遵循其定义的长度，必须禁用flex-shrink.

将此代码添加到您的代码中:

.w-72 {
  width: 18rem;
  flex-shrink: 0; /* new */
}

(上述代码的等效速记为flex: 0 0 18rem.)

.flex {
  display: flex;
}

.w-72 {
  width: 18rem;
  flex-shrink: 0; /* NEW */
}

.w-full {
  width: 100%;
}

.bg-blue-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(147 197 253 / var(--tw-bg-opacity));
}

.bg-orange-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 215 170 / var(--tw-bg-opacity));
}

<div class="flex">
  <nav class="bg-blue-300 w-72">Nav</nav>
  <article class="w-full bg-orange-200">Article</article>
</div>

Css 为什么 width： 100% 在 Flex 父级中缩小这个 div

推荐答案

Css相关问答推荐

基于子元素的子元素数量的样式元素

JavaFX如何在Tableview中使用默认和自定义的列标题CSS样式？

在COLOR-MIX()中使用var()似乎会使其对于不支持COLOR-MIX()的浏览器具有可读性，从而阻止了回退的工作

为什么继承时1rem值不同？

在文本之前添加了额外的空间-Angular 树视图CSS

尽管 URL 路径正确，但背景图像未显示

使用 CSS 关键帧动画更改内容

如何使我的标语(h1元素)不居中对齐？

动态覆盖 Vuetify 类

我可以拆分我的 CSS / SASS webpack 加载器规则，还是它们需要成为一个大规则？

问题定位位置：Tailwindcss 中的绝对元素

Nativewind 的某些样式不适用于本机 (Android)，但它们适用于网络

flex 容器中的两个滚动块

使用 display：inline-block 渲染多行文本组件，行间有白色间隙

CSS 常量()用于什么？

Angular Material 中的样式垫 Select

CSS：背景图像和填充

如何在 iOS 上获取带有 CSS 溢出的滚动条

使用没有设置宽度或高度的边界半径的胶囊形状？

html元素(div)的全高，包括边框，填充和边距？