Css 通过使溢出的子元素具有其宽度的100%来防止Flex元素溢出

<div class="content">
  <div class="sidebar">sidebar</div>
  <div class="container">
    <p>
      how can I make this element stop making its parent overflow and have its own X axis scrollbar // how can I make this element stop making its parent overflow and have its own X axis scrollbar // how can I make this element stop making its parent overflow and have its own X axis scrollbar
    </p>
  <div>
</div>

<style>
.content {
  display:flex;
  min-height: 100vh;
  width: 100vw;
  max-width: 100vw;
}

.sidebar {
  flex-grow: 1;
  flex-basis: 0;
  background: grey;
}

.container {
  flex-grow: 5;
  flex-basis: 0;
  margin: 0;
  background: salmon;
}

p {
  max-width: 100%;
  white-space: nowrap;
  overflow: scroll;
}
</style>

<style>
  .content {
    display: flex;
    min-height: 100vh;
    width: 100vw;
    max-width: 100vw;
    overflow-x: hidden; /* Prevent parent overflow */
  }

  .sidebar {
    flex-grow: 1;
    flex-basis: 0;
    background: grey;
  }

  .container {
    flex-grow: 5;
    flex-basis: 0;
    margin: 0;
    background: salmon;
    overflow-x: auto; /* Enable horizontal scrolling */
    white-space: nowrap; /* Prevent line breaks */
  }

  .scrollable-content {
    width: max-content; /* Ensure the content doesn't wrap */
  }

  p {
    margin: 0;
  }
</style>

Css相关问答推荐

无限交替css动画之间的未知延迟

如何解决 Spotify 嵌入代码中的白色背景错误？

动态覆盖 Vuetify 类

2 列 UL，右列中的列表项数量为奇数？

如何在 VS Code 中获得 JavaFX CSS 属性的自动完成功能？

如何简化CSS？

使用任意运行时字符串进行 Tailwind CSS 类定位

为什么这个绝对定位的 ：：after 伪元素会崩溃，除非父级有过滤器？

Blazor 组件未链接 css

CSS：如何在嵌套计数器中有多个计数器

同一元素的文本和背景之间的图层

如何应用适当样式的元素加消息框？

如何在 CSS Grid 布局中指定行高？

CSS - 等高列？

找到第一个可滚动的父级

HTML/CSS 中的单选/复选框对齐

将 Web 字体转换和渲染为 base64 - 保持原始外观

在 react-native 中使用 flex 使项目粘在底部

如何仅在一侧设置 CSS 边框？

：before 和 ：：before 有什么区别？