Question

我实际上找到了我的问题的解决方案，但想知道为什么我的原始解决方案不起作用。

我有一个简单的flex容器，我希望第一个div占容器的30％。为了达到这个目的，我给了它一个30％的弹性基础。这有效，直到我的内容超过30％的长度。在这一点上，它扩展了div使其超过30％。

我使用max-width属性解决了这个问题，这是我在一些研究后从另一个问题中找到的，但我仍然感到困惑，为什么flex-basis不起作用，并且在使用flex box时不希望有max-width属性。我读过如果flex-direction是row，flex-basis应该是宽度的替代，但似乎并非如此。

这是一个小提琴和css以及它： https://jsfiddle.net/jg5nbdgp/12/

android {
compileSdkVersion 26
defaultConfig {
    applicationId "com.example.coorsdev.sendsms"
    minSdkVersion 14
    targetSdkVersion 26
    versionCode 1
    versionName "1.0"
    multiDexEnabled true //attached requires
    testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
}buildTypes {
    release {
        minifyEnabled false
        proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
    }
}dependencies {
//attached requires
compile 'com.sun.mail:javax.mail:1.6.1'
implementation 'com.android.support:multidex:1.0.2'
implementation 'com.google.android.gms:play-services:11.4.0'

implementation fileTree(dir: 'libs', include: ['*.jar'])
//noinspection GradleCompatible
implementation 'com.android.support:appcompat-v7:26.1.0'
implementation 'com.android.support.constraint:constraint-layout:1.0.2'
testImplementation 'junit:junit:4.12'
androidTestImplementation 'com.android.support.test:runner:1.0.1'
androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.1'

Answer 1

这是因为弹性框项目不能小于实际内容。这是flexbox的默认行为。

将min-width:0加入.left课程将使flex-basis有效。

因此，在您的情况下，您的内容宽度大于flex-basis值，并且默认的flexbox行为弹性框宽度不能小于内容。通过flexbox术语，您的代码实际上已成为

.left {
  flex-basis: 30%;
  min-width: auto;
  max-width: auto;
}

所以你必须更新宽度让flexbox超越默认行为。将您的班级更新为

.left {
  flex-basis: 30%;
  min-width: 0;
}

在单词中，您可以记住width值之前的flex-basis值。

JsFiddle：https://jsfiddle.net/gLodw7k1/

Answer 2

我有一个类似的问题。我有2个相等的列，最大宽度是这样的：

flex-basis: 50%;
max-width: 30em;

除了IE之外，其他任何地方都可以使用。在IE中，它将缩小列。我通过将基数更改为相同的值来固定它，如下所示：

flex-basis: 30em;
max-width: 30em;

它仍然具有响应性，因为flex-basis可以按比例工作，所以对于2个孩子，它等效于50%。

Flex Basis行为与预期不符，但最大宽度有效

2 个答案: