html - 我的 div 元素忽略了带有长文本的 CSS 样式

Question

我有一个设置为特定宽度的元素列表。但是，无论出于何种原因，具有大量文本的元素都忽略了 CSS 以使其更长。

<ion-view view-title="Events">
<ion-content class="events-body">
    <div ng-repeat="month in vm_events.months | orderBy: 'monthNum'">
        <div class="card">
            <div class="item item-divider">
                {{month.monthName}}
            </div>
            <div class="card eventCard"
                 ng-repeat="event in vm_events.events | filter: {month: month.monthName} | orderBy: 'orderBy'"
                 ui-sref="app.events.event-details({eventID: event.id})">
                <ion-item ui-sref="app.events.event-details({eventID: event.id})">
                    <div class="flex-container eventDay">
                        <div class="flex-item left" ui-sref="app.events.event-details({eventID: event.id})">
                            <div class="flex-item day" ng-show="event.day">{{event.day}}</div>
                            <div class="flex-item tbd" ng-hide="event.day">TBD</div>
                            <div class="flex-item dayOfWeek">{{event.weekday}}</div>
                        </div>
                        <div class="flex-item right eventSummary">
                            <div class="name">
                                {{event.name}}
                            </div>
                            <div class="flex-container timeAndPlace">
                                <div class="flex-item place">{{event.location}}</div>
                                <div class="flex-item time">{{event.start}}</div>
                            </div>
                        </div>
                    </div>
                </ion-item>
            </div>
        </div>
    </div>
</ion-content>
</ion-view>

这是 scss。

.events-body {
font-weight: 100;


.card {
    margin: 0;
    border-radius: 0;
    padding-bottom: 8px;
    box-shadow: none;

    .item.item-divider {
        height: 20px;
        min-height: 0;
        border-radius: 0;
        padding: 0 0 0 16px;
        background-color: #909090;

        font-size: 12px;
        color: white;
    }

    .eventCard {
        width: 98%;
        margin: 10px 4px;

        font-size: 16px;
        letter-spacing: 2px;

        ion-item.item.item-complex {
            border-radius: 0;

            a.item-content {
                border-radius: 0;
                padding: 0;

                &.activated .right{
                    background: #8ebce3;

                }
            }

            .left {
                min-width: 21%;
                margin: 0;
                background-color: #e3e3e3;

                display: flex;
                flex-direction: column;
                justify-content: center;

                .flex-item {
                    align-self: center;
                    margin: 0;
                }

                .day {
                    margin: 2px;

                    font-size: 28px;
                }

                .tbd {
                    font-size: 20px;
                }

                .dayOfWeek {
                    font-size: 14px;
                }
            }

            .right {
                width: 100%;
                margin: 0;
                padding: 10px 18px;
                background: #4089c9;
                flex-direction: column;

                font-size: 14px;
                color: white;
                line-height: 20px;

                .timeAndPlace {
                    width: 92%;
                    justify-content: space-between;
                    align-items: flex-end;

                    .place {
                        width: 70%;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }

                    .time {
                        width: 30%;
                    }
                }
            }
        }
    }
}

.flex-container {
    display: flex;
}
}

我们使用一些内部工具以及 npm gulp 和 cordova。不过，我想我可以展示这么多。

无论我在 div 元素中有多少文本，如果它小于一定长度，那么宽度就是正确的。否则，宽度开始动态调整。我试图将其更改为最大宽度，但这没有任何帮助。

是什么原因造成的，我该如何解决？

编辑 - 此外，我正在使用 Chrome 的检查元素，尽管该元素的大小与其他 70% 元素不同，但该元素的计算样式仍然显示为 70%。

Answer 1

这是因为你的 flexbox 应该随着它的内容而增长。为防止这种情况，请在 flexbox 元素上使用 max-width。

.flexBox {
  display: flex;
  width: 98%;
  margin: 10px 4px;

  .location {
    width: 70%;
    max-width: 70%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .time {
    max-width: 30%
    width: 30%
  }
}