Safari (iPad) 中的弹性项目重叠

2024-03-15

我无法通过简单的任务解决问题:

  • 容器宽度为 100%,但有 padding-right 和 box-sizing 溢出
  • 容器是弹性行
  • 容器有两个具有动态内容的子容器
  • 第一个孩子有内容的大小
  • 第二个孩子占据剩余的宽度

预期结果:

iPad 结果:

例子是https://codepen.io/anon/pen/zaMwvr https://codepen.io/anon/pen/zaMwvr

#wrap {
  width: 100%;
  border: 1px dashed orangered;
  box-sizing: border-box;
  padding-right: 300px;
  position: relative;
}

#padding-view {
  width: 300px;
  position: absolute;
  background: coral;
  right: 0;
  height: 100%;
}

#flex {
  display: flex;
}
<div id="wrap">
  <div id="padding-view"></div>
  <div id="flex">
    <div id="dynamic">LALALCALCULATEDDYNAMICLY</div>
    <div id="rest">{Long text here}</div>
  </div>
</div>

尝试添加flex-shrink: 0 or min-width: auto to .dynamic (修改后的代码笔 https://codepen.io/anon/pen/eKQGKd).

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Safari (iPad) 中的弹性项目重叠 的相关文章

  • 具有透明背景的 Swift 模态视图控制器 [重复]

    这个问题在这里已经有答案了 我知道这个话题很受欢迎 但我在编程语言中遇到了一些问题 事实是我仍然不明白我把代码放在哪里 好吧 我就来说说整个案子 我正在尝试制作一个与正常情况稍有不同的模态 Swift 通过单击按钮 ViewControll
  • 使 css nth-child() 只影响可见

    有没有办法用这个CSS只影响可见元素 table grid tr alt nth child odd background ebeff4 table grid tr alt nth child even background ffffff
  • Apple 针对 http 直播流媒体应用程序的政策

    这里有要求 http developer apple com library ios documentation NetworkingInternet Conceptual StreamingMediaGuide UsingHTTPLive
  • 通过应用程序组在应用程序之间通信和保存数据

    iOS 8 昨天发布了一个有关应用程序组的新 API 以前在应用程序之间共享数据和通信有点混乱 我相信这正是应用程序组旨在纠正的问题 在我的应用程序中 我启用了应用程序组并添加了一个新组 但我找不到任何有关如何使用它的文档 文档和 API
  • 使用无图像按钮有哪些优点?

    讨论关于这个答案 https stackoverflow com questions 520640 how can i use googles new imageless button how could i reverse enginee
  • 如何在 Xamarin.iOS 应用程序中创建导航?

    我习惯于与Xamarin Forms 我用 XAML 或 C 创建一个页面并导航到它 但现在这是我第一次尝试创建一个不适合的 iOS 应用程序Xamarin Forms 我在 Windows PC 上的 Visual Studio 中进行此
  • Cordova - 启动后出现白屏,控制台中没有例外

    我已经离开我的 Cordova 应用程序一段时间了 但昨天刚刚进行了一次新的克隆 发现它出现了 死机白屏 症状 启动画面显示 程序加载 然后我就得到一个空白屏幕 更多细节 CLI 科尔多瓦 6 1 1 安卓 5 1 1 ios 4 1 1
  • 从 plist 文件中解码数据

    我丢失了在 Macbook Air 上用 Textwrangler 编写的文本文件中的一些数据 我在扩展名为 plist 的文件中找到了其中一些 文件是用 xml 编写的 如下所示
  • 返回一个dispatch_async获取的变量[重复]

    这个问题在这里已经有答案了 基本上 一个方法需要返回一个在dispatch async中获取的NSDictionary 这是我尝试过的 NSDictionary fetchNSDictionary dispatch queue t Queu
  • ASP.NET - Google Chrome 缓存 DropDownList 选择

    我的购物车页面上的 Google Chrome 和 Safari 似乎遇到了缓存问题 购物车中有 2 个下拉列表 当您在更改下拉列表中的值后点击结帐按钮时 它会将列表中选择的内容提交到数据库 解释意外的行为有点困难 所以我会尝试一步一步地写
  • 使网格项跨越到隐式网格中的最后一行/列

    当我不知道行数时 是否可以使网格项跨度从第一行到最后一行 假设我有以下 HTML 内容 其中包含未知数量的框 我怎样才能做到第三个 box从第一条网格线到最后一条网格线 container display grid grid templat
  • ExpandableLabel iOS 中的“少看”

    我正在使用第三方库可扩展标签 https github com apploft ExpandableLabel实施一个see more特征 我正在寻找仅快速的解决方案 其中包含标签中的文本而不是按钮中的文本 因此这可以完美地工作 添加库并更
  • iOS JPEG 图像旋转 90 度

    我正在使用选择器视图从相册中选择图像 我使用上面的代码 void imagePickerController UIImagePickerController picker didFinishPickingMediaWithInfo NSDi
  • Swift - 将图像插入 PDF 不再适用于 iOS 13

    目前正在开发在我的贷款计算器应用程序上导出 PDF 的功能 我有一个预览屏幕 可以在您保存 PDF 之前显示它 预览屏幕由带有 html 的 webView 组成 其中包含占位符 我能够成功地将图像插入到正确的占位符上 并将其显示在 PDF
  • IE8 中空 div 层的 z-index 问题

    我在 IE8 中遇到 z index 问题 其他尚未测试 以下 JS 创建一些 html css document write img src border 0 document write div style background col
  • 使用 NSFileHandle 覆盖数据

    使用 NSFileHandle 使用 truncateFileAtOffset 从文件末尾删除 n 个字符非常容易 void removeCharacters int numberOfCharacters fromEndOfFile NSF
  • 如何更改元素的 CSS 类并在单击时删除所有其他类

    我如何处理 AngularJS 2 中的一种情况 即单击一个元素需要更改其自己的样式 并且如果其他元素具有该样式 则需要将其删除 最好在一个函数中 如同Angular js 如何在单击时更改元素 css 类并删除所有其他元素 https s
  • 中心引导表宽度为 100%?

    table class table table striped table hover table responsive table
  • 弱变量中间为零

    弱变量什么时候变为零 weak var backgroundNode SKSpriteNode texture SKTexture image initialBackgroundImage backgroundNode position C
  • 我如何用 javascript/jquery 进行两指拖动?

    我正在尝试创建当有两个手指放在 div 上时拖动 div 的功能 我已将 div 绑定到 touchstart 和 touchmove 事件 我只是不确定如何编写这些函数 就像是if event originalEvent targetTo

随机推荐