Asked  7 Months ago    Answers:  5   Viewed   45 times

Consider the following snippet:

.parent {
  display: flex;
  flex-direction: column;
  width: 400px;
  border: 1px solid red;
  align-items: center;
}
.child {
  border: 1px solid blue;
}
<div class="parent">
  <div class="child">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry
  </div>
  <div class="child">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry
  </div>
</div>

In Chrome, the text is wrapping as expected:

enter image description here

But, in IE11, the text is not wrapping:

enter image description here

Is this a known bug in IE? (if yes, a pointer will be appreciated)

Is there a known workaround?


This similar question doesn't have a definite answer and an official pointer.

 Answers

44

Add this to your code:

.child { width: 100%; }

We know that a block-level child is supposed to occupy the full width of the parent.

Chrome understands this.

IE11, for whatever reason, wants an explicit request.

Using flex-basis: 100% or flex: 1 also works.

.parent {
  display: flex;
  flex-direction: column;
  width: 400px;
  border: 1px solid red;
  align-items: center;
}
.child {
  border: 1px solid blue;
  width: calc(100% - 2px);       /* NEW; used calc to adjust for parent borders */
}
<div class="parent">
  <div class="child">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry
  </div>
  <div class="child">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry
  </div>
</div>

Note: Sometimes it will be necessary to sort through the various levels of the HTML structure to pinpoint which container gets the width: 100%. CSS wrap text not working in IE

Tuesday, June 1, 2021
 
Zulakis
answered 7 Months ago
24

According to this blog (http://demosthenes.info/blog/534/Cross-browser-Image-Blur-with-CSS) the blur filter was dropped after IE9:

filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='3');

They did give a solution called StackBlur (using JavaScript and Canvases):

http://quasimondo.com/StackBlurForCanvas/StackBlurDemo.html

It is in the form of a javascript add-on downloadable from that site.

Friday, June 25, 2021
 
TheTechnicalPaladin
answered 6 Months ago
61

You have two problems to address in this layout for it to work in Chrome, Safari, Firefox and IE11.

The minimum sizing algorithm on flex items.

A flex item, by default, cannot be smaller than the size of its content. The minimum size is defined in the spec as min-width: auto and min-height: auto.

Some browsers take it upon themselves to adjust this setting (which is why your layout works in Chrome). Other browsers require you to override the default setting (which is what is needed in FF and IE11).

You can override the default with min-width: 0 / min-height: 0, or overflow with any value other than visible.

Add this to your code:

.flex-wrapper .flex-wrapper-inner .column-wrapper {
    flex-grow: 1;
    display: flex;
    overflow: hidden;; /* IE11 & Firefox fix */
}

Here's a more complete explanation:

  • Why doesn't flex item shrink past content size?

IE11 is ignoring the `max-height` and `min-height` on your flex container.

In your layout, it appears that IE11 is simply ignoring your max-height and min-height rules. However, these rules appear to work fine on flex items. So make your container also a flex item.

Add this to your code:

body {
  display: flex; /* IE11 fix */
}

More information:

  • flex container min-height ignored in IE
  • https://github.com/philipwalton/flexbugs

body {
  display: flex; /* IE11 fix */
}

.flex-wrapper {
  display: flex;
  margin: 20px auto;
  width: 1184px;
  max-height: 80vh;
  border: 2px solid red;
  smin-height: 150px;
  flex-shrink: 0; /* override default `flex-shrink: 1` */
}

.flex-wrapper .flex-wrapper-inner {
  display: flex;
  width: 100%;
  flex-direction: column;
}

.flex-wrapper .flex-wrapper-inner .header {
  display: flex;
  flex-shrink: 0;
  width: 100%;
}

.flex-wrapper .flex-wrapper-inner .header H4 {
  flex: 1;
}

.flex-wrapper .flex-wrapper-inner .column-wrapper {
  flex-grow: 1;
  display: flex;
  overflow: hidden;; /* IE11 & Firefox fix */
}

.flex-wrapper .flex-wrapper-inner .column {
  flex: 1;
  overflow-y: auto;
}

.flex-wrapper .flex-wrapper-inner .column H4 {
  text-align: center;
}

.box-results-users .list-group-item {
  margin: 0;
}

.box-results-users .list-group-item IMG {
  height: 60px;
  width: 60px;
}

.box-results {
  position: relative;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="flex-wrapper">
  <div class="flex-wrapper-inner">
    <div class="header">
      <h4>Box 1</h4>
      <h4>Box 2</h4>
      <h4>Box 3</h4>
    </div>
    <div class="column-wrapper">
      <div class="column">
        <div class="box-results list-group">
          <a class="list-group-item" href="#">Quisque coeptis possedit radiis. Ardentior et contraria et quinta feras</a>
          <a class="list-group-item" href="#">Quisque coeptis possedit radiis. Ardentior et contraria et quinta feras</a>
          <a class="list-group-item" href="#">Quisque coeptis possedit radiis. Ardentior et contraria et quinta feras</a>
          <a class="list-group-item" href="#">Quisque coeptis possedit radiis. Ardentior et contraria et quinta feras</a>
          <a class="list-group-item" href="#">Quisque coeptis possedit radiis. Ardentior et contraria et quinta feras</a>
          <a class="list-group-item" href="#">Quisque coeptis possedit radiis. Ardentior et contraria et quinta feras</a>
          <a class="list-group-item" href="#">Quisque coeptis possedit radiis. Ardentior et contraria et quinta feras</a>
          <a class="list-group-item" href="#">Quisque coeptis possedit radiis. Ardentior et contraria et quinta feras</a>
          <a class="list-group-item" href="#">Quisque coeptis possedit radiis. Ardentior et contraria et quinta feras</a>
          <a class="list-group-item" href="#">Quisque coeptis possedit radiis. Ardentior et contraria et quinta feras</a>
          <a class="list-group-item" href="#">Quisque coeptis possedit radiis. Ardentior et contraria et quinta feras</a>
          <a class="list-group-item" href="#">Quisque coeptis possedit radiis. Ardentior et contraria et quinta feras</a>
          <a class="list-group-item" href="#">Quisque coeptis possedit radiis. Ardentior et contraria et quinta feras</a>
          <a class="list-group-item" href="#">Quisque coeptis possedit radiis. Ardentior et contraria et quinta feras</a>


        </div>

      </div>
      <div class="column">
        <div class="box-results">
          <a class="list-group-item" href="#">Quisque coeptis possedit radiis. Ardentior et contraria et quinta feras</a>
          <a class="list-group-item" href="#">Quisque coeptis possedit radiis. Ardentior et contraria et quinta feras</a>
          <a class="list-group-item" href="#">Quisque coeptis possedit radiis. Ardentior et contraria et quinta feras</a>
          <a class="list-group-item" href="#">Quisque coeptis possedit radiis. Ardentior et contraria et quinta feras</a>
          <a class="list-group-item" href="#">Quisque coeptis possedit radiis. Ardentior et contraria et quinta feras</a>

        </div>
      </div>
      <div class="column">
        <div class="box-results box-results-users">
          <div class="media list-group-item">
            <div class="media-left">
              <a href="#">
                <img class="media-object" src="https://randomuser.me/api/portraits/men/38.jpg" alt="...">
              </a>
            </div>
            <div class="media-body">
              <h4 class="media-heading">User Test</h4> ...
            </div>
          </div>
          <div class="media list-group-item">
            <div class="media-left">
              <a href="#">
                <img class="media-object" src="https://randomuser.me/api/portraits/men/38.jpg" alt="...">
              </a>
            </div>
            <div class="media-body">
              <h4 class="media-heading">User Test</h4> ...
            </div>
          </div>
          <div class="media list-group-item">
            <div class="media-left">
              <a href="#">
                <img class="media-object" src="https://randomuser.me/api/portraits/men/38.jpg" alt="...">
              </a>
            </div>
            <div class="media-body">
              <h4 class="media-heading">User Test</h4> ...
            </div>
          </div>
          <div class="media list-group-item">
            <div class="media-left">
              <a href="#">
                <img class="media-object" src="https://randomuser.me/api/portraits/men/38.jpg" alt="...">
              </a>
            </div>
            <div class="media-body">
              <h4 class="media-heading">User Test</h4> ...
            </div>
          </div>

          <div class="media list-group-item">
            <div class="media-left">
              <a href="#">
                <img class="media-object" src="https://randomuser.me/api/portraits/men/38.jpg" alt="...">
              </a>
            </div>
            <div class="media-body">
              <h4 class="media-heading">User Test</h4> ...
            </div>
          </div>
          <div class="media list-group-item">
            <div class="media-left">
              <a href="#">
                <img class="media-object" src="https://randomuser.me/api/portraits/men/38.jpg" alt="...">
              </a>
            </div>
            <div class="media-body">
              <h4 class="media-heading">User Test</h4> ...
            </div>
          </div>
          <div class="media list-group-item">
            <div class="media-left">
              <a href="#">
                <img class="media-object" src="https://randomuser.me/api/portraits/men/38.jpg" alt="...">
              </a>
            </div>
            <div class="media-body">
              <h4 class="media-heading">User Test</h4> ...
            </div>
          </div>
          <div class="media list-group-item">
            <div class="media-left">
              <a href="#">
                <img class="media-object" src="https://randomuser.me/api/portraits/men/38.jpg" alt="...">
              </a>
            </div>
            <div class="media-body">
              <h4 class="media-heading">User Test</h4> ...
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

jsFiddle demo

Friday, July 23, 2021
 
IvanH
answered 5 Months ago
25

I modify your starting attempt.

Main idea is to change img width: 100%; to width: auto; and specify links' height. This will give us images with gaps.

To remove the gaps we could add to links display: flex; and flex-direction: column;. Almost done.

Last step is to add to links max-width: 100%;, it will protect from ovelflow if image width will be wider than column in small screen. Such problem we could see in Temani Afif's first solution with 4th image, if we put higher height of links. Edited

Look into snippet.

section {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}

section a {
  flex: auto;
  display: flex;
  flex-direction: column;
  height: 166px;
  max-width: 100%;
}

section img {
  height: 100%;
  width: auto;
  object-fit: cover;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Controlling flex growability</title>
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <style>

  </style>
</head>

<body>
  <section>
    <a href="#"><img src="https://placekitten.com/400/195" width="400" height="195" alt="Kitty"></a>
    <a href="#"><img src="https://placekitten.com/256/400" width="256" height="400" alt="Kitty"></a>
    <a href="#"><img src="https://placekitten.com/400/237" width="400" height="237" alt="Kitty"></a>
    <a href="#"><img src="https://placekitten.com/400/111" width="400" height="111" alt="Kitty"></a>
    <a href="#"><img src="https://placekitten.com/400/245" width="400" height="245" alt="Kitty"></a>
    <a href="#"><img src="https://placekitten.com/400/227" width="400" height="227" alt="Kitty"></a>
    <a href="#"><img src="https://placekitten.com/250/400" width="250" height="400" alt="Kitty"></a>
    <a href="#"><img src="https://placekitten.com/400/269" width="400" height="269" alt="Kitty"></a>
    <a href="#"><img src="https://placekitten.com/400/255" width="400" height="255" alt="Kitty"></a>
    <a href="#"><img src="https://placekitten.com/288/400" width="288" height="400" alt="Kitty"></a>
    <a href="#"><img src="https://placekitten.com/234/400" width="234" height="400" alt="Kitty"></a>
    <a href="#"><img src="https://placekitten.com/194/400" width="194" height="400" alt="Kitty"></a>
    <a href="#"><img src="https://placekitten.com/222/400" width="222" height="400" alt="Kitty"></a>
    <a href="#"><img src="https://placekitten.com/400/227" width="400" height="227" alt="Kitty"></a>
    <a href="#"><img src="https://placekitten.com/192/400" width="192" height="400" alt="Kitty"></a>
    <a href="#"><img src="https://placekitten.com/400/141" width="400" height="141" alt="Kitty"></a>
    <a href="#"><img src="https://placekitten.com/400/289" width="400" height="289" alt="Kitty"></a>
    <a href="#"><img src="https://placekitten.com/400/255" width="400" height="255" alt="Kitty"></a>
    <a href="#"><img src="https://placekitten.com/210/400" width="210" height="400" alt="Kitty"></a>
    <a href="#"><img src="https://placekitten.com/400/187" width="400" height="187" alt="Kitty"></a>
  </section>
</body>

</html>
Thursday, August 5, 2021
 
mnagel
answered 4 Months ago
99

Ok, I have found a way to do this (after a lot of googling and Windows API referencing) and I am posting a solution here in case anyone else ever needs to figure this out. There is no clean .NET solution to this, but fortunately, the Windows API allows you to override the default procedure that gets called when handling word wrapping. First you need to import the following DLL:

[DllImport("user32.dll")]

    extern static IntPtr SendMessage(IntPtr hwnd, uint message, IntPtr wParam, IntPtr lParam);

Then you need to define this constant:

 const uint EM_SETWORDBREAKPROC = 0x00D0;

Then create a delegate and event:

    delegate int EditWordBreakProc(IntPtr text, int pos_in_text, int bCharSet, int action);

    event EditWordBreakProc myCallBackEvent;

Then create our new function to handle word wrap (which in this case I don't want it to do anything):

     private int myCallBack(IntPtr text, int pos_in_text, int bCharSet, int action)

    {

        return 0;

    }

Finally, in the Shown event of your form:

        myCallBackEvent = new EditWordBreakProc(myCallBack);

        IntPtr ptr_func = Marshal.GetFunctionPointerForDelegate(myCallBackEvent);

        SendMessage(txtDataEntry.Handle, EM_SETWORDBREAKPROC, IntPtr.Zero, ptr_func);
Tuesday, August 17, 2021
 
Scheff's Cat
answered 4 Months ago
Only authorized users can answer the question. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :
 
Share