Tailwind Flex - 宽度全尺寸答案

【问题标题】：Tailwind Flex - Width full sizeTailwind Flex - 宽度全尺寸
【发布时间】：2021-12-11 04:15:38
【问题描述】：

index.html：

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong
        >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
        properly without JavaScript enabled. Please enable it to
        continue.</strong
      >
    </noscript>
    <div id="app" class="bg-red-300"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

App.vue：

<template>
  <div class="flex flex-col md:flex-row">
    <Nav class="bg-gray-300 md:w-1/4" />
    <router-view class="bg-yellow-400" />
  </div>
</template>

<script>
import Nav from './components/nav_components/Nav.vue';
export default {
  name: 'App',
  components: {
    Nav,
  },
};
</script>

<style></style>

640px Tailwind 的小断点（sm）
768px Tailwind 的中等断点 (md)

直到 768px 我使用 flex-col，对于更大的屏幕尺寸我使用 flex-row，正如您在我的代码中看到的那样嗯。

结果：（0-768px 宽度，flex-col）：

在 640px 和 768px 之间，我的 Nav 和 router-view 容器的宽度都停止扩展，我可以看到我安装应用程序的位置的红色背景。

结果：（>768px 宽度，flex-row）：

在 2050 像素之后，我的容器停止扩展，这导致与之前提到的结果相同。

我能做些什么来解决这个问题？

【问题讨论】：

您好，请将实际代码发布到代码 sn-p，not an image of the code。
嘿，JHeth，我更新了我的帖子。
据我所知，您可能只需将flex-1 添加到黄色路由器视图容器中。没有完整的图片很难判断，但这是您在 Tailwind Play play.tailwindcss.com/v6glusf2M1 上进行单个更改的基本版本如果这不能为您解决问题，那么您的布局中会发生其他事情，您应该使用检查器以查看该空间来自主 App.vue 之外的位置。
嘿 JHeth 感谢您的回复。使用这个标志 flex-1 没有任何改变。这个空间来自路由器视图容器本身。我注意到这两个容器的最大宽度都是 1536 像素，这就是为什么它显示我安装应用程序的 div 的红色背景！所以现在我只需要将最大宽度固定为更高，一切都很好！
通过在 router-view 组件上添加 tailwind 属性 max-w-full 来修复它。感谢您指导我！

标签： flexbox tailwind-css

【解决方案1】：

最大宽度默认为 1536 像素。将 max-w-full 设置为我的路由器视图容器可以解决问题。

【讨论】：