मेरे पास 3 "पैन" या कॉलम अगल-बगल हैं। मैं चाहता हूं कि बीच वाला .mid-pane अधिकांश जगह ले ले। लेकिन किसी भी चौड़ाई के मान को बदलने से कुछ नहीं होता है। मैं कहता हूं width: 10px; और कुछ नहीं होता। क्या चल रहा है? https://jsfiddle.net/agtfwmhq/1/

body,
html {
  width: 100%;
  height: 100%;
  margin: 0;
}

.maindiv {
  height: 100%;
  padding: 0;
}

.container {
  display: flex;
}

.container>div {
  flex: 1;
  /*grow*/
}

.left-pane {
  width: 100px;
  height: 100%;
  background-color: #5897fb;
}

.mid-pane {
  width: 80%;
  height: 100%;
  margin: 0;
  padding: 10px;
}

.right-pane {
  width: 100px;
  height: 100%;
  background-color: #ffefef;
}
<div class="maindiv container">
  <div class="left-pane">
  </div>

  <div class="mid-pane">
  </div>

  <div class="right-pane">
  </div>
</div>
0
esafresa 23 अक्टूबर 2019, 19:54

1 उत्तर

सबसे बढ़िया उत्तर

इसे काम करने के लिए आप इसे CSS के नीचे बदल सकते हैं। Flexgrow प्रॉपर्टी देने से होगा जादू

.

/** comment this
  * container > div {
  * flex: 1; /*grow*/
  * } */

.left-pane {
    flex: 1;
    height: 100%;
    background-color: #5897fb;
}
.mid-pane {
    flex: 2;
    height: 100%;
    margin: 0;
    padding: 10px;
}
.right-pane {
    flex: 1;
    height: 100%;
    background-color: #ffefef;
}
0
lost_in_magento 23 अक्टूबर 2019, 17:18