Flexbox и runat="server" влияют и отключают flexbox

Aside используется для полного раздела, оставленного в веб-сайте.

* {
    padding: 0px;
    margin: 0px;
}
html,
body {
    width: 100%;
    height: 100%;
    color: #00374b;
    font-family: Verdana, sans-serif;
    font-size: 0.9em;
    background-color: #FFFFFF;
}
/*First big flexbox container that places the elements from top to down (column)*/
.flex_container {
    width: 100%;
    height: 100%;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-direction: column;
    -webkit-flex-flow: column;
    flex-direction: column;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
}
/*Second big flexbox container for the ASP form from left (aside) to right (main section) (row)*/
.layout_main {
    flex: 1 auto;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-direction: row;
    -webkit-flex-flow: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
}



.layout_aside {
    flex: 1 auto;
    background-color: #004664;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-direction: column;
    -webkit-flex-flow: column;
    flex-direction: column;
    padding: 10px;
}

.element {
    flex: 1 auto;
}

.layout_main_content {
    flex: 1 1 90%;
    min-width: 500px;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-direction: column;
    -webkit-flex-flow: column;
    flex-direction: column;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
}
article{
 flex: 1 auto;
}
<body class="flex_container">
 <div class="layout_main">
  
  <aside class="layout_aside" id="aside_menu" runat="server">
   <div class="element">Test 1</div>
   <div class="element">Test 2</div>
   <div class="element">Test 3</div>
  </aside>

  <div class="layout_main_content">
   <article>Article1</article>
   <article>Article2</article>
   </div>
 </div>
</body>

Для этого кода определение flexbox не работает в стороне. Если я удаляю runat="server", то flexbox снова распознается. Любое предложение или решение. Я пытался перевести сервер runat в другой раздел, но это не помогло.

Источник

0 ответов

Другие вопросы по тегам