Question

我有4个盒子，我想调整窗口大小的大小。方框1将收缩，但方框2,3和4不会收缩。我做错了什么？

＆＃13;

.contents {
  display: flex;
  justify-content: flex-end;
  min-width: 0px;
}

.contents div:first-child {
  flex-grow: 1;
  padding: 5px;
}

.contents div {
  border-left: 1px solid red;
  flex-shrink: 1;
  min-width: 0px;
  overflow: hidden;
  padding: 5px 100px;
}

＆＃13;

<div class="contents">
  <div>1 Really long text goes in here, really long text goes in here.</div>
  <div>2 Lorem</div>
  <div>3 Ipsum</div>
  <div>4 Dolor</div>
</div>

＆＃13;

http://codepen.io/anon/pen/OppdmQ?editors=1100#0

谢谢。

Answer 1

每个项目的左右两侧都有100px填充（.contents div { border-left: 1px solid red; flex: 0 1 200px; /* can't grow, can shrink, start at 200px width */ min-width: 0px; overflow: hidden; padding: 5px; text-align: center; }）。这是<200> 不灵活的宽度的200px。请尝试使用此方法：

CREATE TABLE Import_Log (message_guid varchar2(36),
                 xml_data XMLType)
  XMLTYPE xml_data STORE AS BINARY XML
  VIRTUAL COLUMNS
  (policynumber AS (XMLCast(XMLQuery('/PolicyMessage/Policy/PolicyNumber'
                               PASSING xml_data RETURNING CONTENT)
                      AS VARCHAR2(14))),
   effective_date AS (XMLCast(XMLQuery('/PolicyMessage/Policy/PolicyEffectiveDate'
                               PASSING xml_data RETURNING CONTENT)
                      AS DATE )),
   expiration_date AS (XMLCast(XMLQuery('/PolicyMessage/Policy/PolicyExpirationDate'
                               PASSING xml_data RETURNING CONTENT)
                      AS DATE ))
   );

revised codepen

Answer 2

如果您打算使用填充，您将无法获得所需的效果，因为无论您的屏幕尺寸如何，它都会占用大量空间。因此，在这种情况下，您需要使用介质断点更改填充或根据屏幕大小更改弹性属性。

Flexbox项目没有缩小

2 个答案: